Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Скрипт блокировки checkbox


Автор: fPtr 10.5.2007, 14:06
Здравствуйте.

Сижу, бьюсь с задачкой.
Необходимо вывести на  табличку с чеками, при чем чеки в первой колонке активируют чеки находящиеся во второй колонке.
Проблема в том, что если на форме один чек то скрипт работает, а если нет, то нет  smile .

В общем, мне кажется, что скрипт не работает т.к. создаются чеки с одинаковыми именами. 
Не могу придумать, как сделать, чтоб это заработало.
Нужно менять имена Input’ов в цикле, а потом вызывать check с параметром (имя или id input’a). 

Вот скрипт и страничка:
Код


    <script type="text/javascript">
        function gotoregistr(uri, param) {
            document.forms["roleopen"].action = uri;
            document.forms["roleopen"].elements["state"].value = param;
            document.forms["roleopen"].submit();
        }
    </script>
    <script type="text/javascript">
        function check(){
            var form = document.forms["roleopen"];
                
            if(!form.elements["downsys"].checked){
                form.elements["actRead"].disabled = "true";
                form.elements["actWrite"].disabled ="true";
                form.elements["actDelete"].disabled ="true";
            }
            else{
                form.elements["actRead"].disabled = "";
                form.elements["actWrite"].disabled = "";
                form.elements["actDelete"].disabled = "";
            }
        }
    </script>    



Код

<%@ page contentType="text/html;charset=windows-1251" errorPage="/error.jsp"%>
<%@ page import="com.sibsac.nae.userview.actions.GoToRoles"%>
<%@ taglib uri="/WEB-INF/lib/taglib.jar" prefix="me"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
    <title>roleopen</title>
    <link type="text/css" rel="stylesheet" href="css/nae.css"/>
    </head>
    <body>
        <form name="roleopen" action="GoToRoles.do" method="POST">  
        
            <table cellpadding="0px" cellspacing="0px" width="98%" border="1px"
             class="tblconvex" style="margin-left: 4px;margin-right: 4px;">
            <caption style="font-size: 12px; text-align:center;">Список подсистем:</caption>
                 
                 <tr class="th" style="height: 30px;">
                    <th>Подсистема</th>
                    <th>Разрешенные действия</th>
                </tr>
                <me:subsystemlist>
                <tr>    
                    <th class="trodd" style="text-align:left; width: 300px;" >
                        <input type="checkbox" name="downsys" onclick="check()" /> Подсистема: <%=subsysname%> <br/>
                        Описание: <%=subsysfullname%>
                    </th>
                    <th class="trodd" style="text-align:left;" >
                        <div><input type="checkbox" name="actRead" disabled="true" />Чтение</div>
                        <div><input type="checkbox" name="actWrite" disabled="true" />Редакирование</div>
                        <div><input type="checkbox" name="actDelete" disabled="true" />Удаление</div>
                    </th>
                </tr>
                </me:subsystemlist>
            </table>
            <input type="hidden" name="state" value="1"></input>
        </form>
    </body>
</html>

Пожалуйста, приведите пример, как это сделать!!!!  smile 

Автор: ksnk 10.5.2007, 14:41
Способов много, как пример - использовать дополнительный атрибут для "зависимых" инпутов и перебирать их в цикле.

Код

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
    <title>roleopen</title>
    <link type="text/css" rel="stylesheet" href="css/nae.css"/>
<script>
function check(e) {
  var id=e.id || e.name ;
  if (!id) return;
  var v = document.getElementsByTagName('input'),vl=v.length
  while(vl--){
     var vv=v[vl],
         x=(vv.getAttribute && vv.getAttribute('dependon'))
     if(x && (x == id)) {
        if (vv.disabled==e.checked) vv.disabled=!vv.disabled
     }
  }
}
</script>
    </head>
    <body>
        <form name="roleopen" action="GoToRoles.do" method="POST">  
        
            <table cellpadding="0px" cellspacing="0px" width="98%" border="1px"
             class="tblconvex" style="margin-left: 4px;margin-right: 4px;">
            <caption style="font-size: 12px; text-align:center;">Список подсистем:</caption>
                 
                 <tr class="th" style="height: 30px;">
                    <th>Подсистема</th>
                    <th>Разрешенные действия</th>
                </tr>
                <me:subsystemlist>
                <tr>    
                    <th class="trodd" style="text-align:left; width: 300px;" >
                        <input type="checkbox" name="downsys" onclick="check(this)" /> Подсистема: <%=subsysname%> <br/>
                        Описание: <%=subsysfullname%>
                    </th>
                    <th class="trodd" style="text-align:left;" >
                        <div><input type="checkbox" name="actRead" disabled="true" dependon='downsys'/>Чтение</div>
                        <div><input type="checkbox" name="actWrite" disabled="true" dependon='downsys'/>Редакирование</div>
                        <div><input type="checkbox" name="actDelete" disabled="true" dependon='downsys'/>Удаление</div>
                    </th>
                </tr>
                </me:subsystemlist>
            </table>
            <input type="hidden" name="state" value="1"></input>
        </form>
    </body>
</html>


- check принимает параметр this 
 - все "зависимые" input'ы снабжаются атрибутом dependon с именем (или ID'ом) главного input'а

Автор: solenko 10.5.2007, 14:51
формируйте имя чекбоксов, например, так:
Код

 <input type="checkbox" name="downsys" onclick="check(downsys)" />
<div><input type="checkbox" name="downsys_actRead" disabled="true" />

тогда получим нечто вроде:
Код

function check(cb){
    var f = cb.form;
    var val = 'true';
    if (cb.checked)
        val = '';
    for (var i=0;i<f.elements.length;i++){
        var name = f.elements[i].name.split('_');
        if (name.length > 1 && name[0] == cb.name)
            f.elements[i].disabled = val;
    }
}


ksnk, дополнительные аттрибуты, добавленные версткой воспринимают не все браузеры.

Автор: ksnk 10.5.2007, 15:10
Цитата(solenko @  10.5.2007,  14:51 Найти цитируемый пост)
ksnk, дополнительные аттрибуты, добавленные версткой воспринимают не все браузеры.

Велик ли процент "http://www.artlebedev.ru/tools/browsers/"? Впрочем, это - мысли вслух, ответа не требуется  smile 


Автор: fPtr 11.5.2007, 05:35
Спасибо большое за помощь!!!!

Код

<input type="checkbox" name="downsys" onclick="check(downsys)" />
<div><input type="checkbox" name="downsys_actRead" disabled="true" />

solenko здесь необходимо отправить в место check(downsys), check(this), и тогда все работает!

ksnk твой вариант тоже работает, но необходимо так же изменять имена формируемых input'ов
Код

                    <th class="trodd" style="text-align:left; width: 300px;" >
                        <input type="checkbox" name="downsys" onclick="check(this)" /> Подсистема: <%=subsysname%> <br/>
                        Описание: <%=subsysfullname%>
                    </th>
                    <th class="trodd" style="text-align:left;" >
                        <div><input type="checkbox" name="actRead" disabled="true" dependon='downsys'/>Чтение</div>
                        <div><input type="checkbox" name="actWrite" disabled="true" dependon='downsys'/>Редакирование</div>
                        <div><input type="checkbox" name="actDelete" disabled="true" dependon='downsys'/>Удаление</div>
                    </th>

ksnk здесь, необходимо изменять имена actRead, actWrite, actDelete, на [имя "основного импута"]_actRead и т.д.
Должно быть что то, вроде:
Код

                    <th class="trodd" style="text-align:left; width: 300px;" >
                        <input type="checkbox" name="downsys" onclick="check(this)" /> Подсистема: <%=subsysname%> <br/>
                        Описание: <%=subsysfullname%>
                    </th>
                    <th class="trodd" style="text-align:left;" >
                        <div><input type="checkbox" name="downsys_actRead" disabled="true" dependon='downsys'/>Чтение</div>
                        <div><input type="checkbox" name="downsys_actWrite" disabled="true" dependon='downsys'/>Редакирование</div>
                        <div><input type="checkbox" name="downsys_actDelete" disabled="true" dependon='downsys'/>Удаление</div>
                    </th>

Все что хотел заработало  smile  ура!!!  smile 
ksnksolenko спасибо за помощь smile 

Автор: ksnk 11.5.2007, 12:50
fPtr, Пожалуйста, однако, зачем этот самый downsys указывать в input'e целых 2 раза я не понимаю.

Автор: solenko 11.5.2007, 13:08
fPtr, сори, опечатался.
ksnk, наверное для того чтобы потом их хоть как-то на сервере различить. Хотя я бы использовал одно имя для всех checkbox'ов и различал бы их уже по value

Автор: fPtr 11.5.2007, 14:31
Это просто я на примере работал  smile 
В общем я все переделал как вы сказали получилось, хорошо.

В общем - система дает права на доступ к подсистемам. 
По этому:
Для приславутых input'ов downsys  smile  беру имена из базы (идентификаторы подсистемы).
Код

<input type="checkbox" name="<%=subsysid%>" onclick="check(this)" />

А в осталные [идентификатор подсистемы]_название действия. Хотя можно и не делать так.
Код

<input type="checkbox" name="<%=subsysid%>_subsyssuperadm"  >Администратор системы</input><br/>
<input type="checkbox" name="<%=subsysid%>_subsysadmuser"  >Администрирование пользователей</input><br/>

Получилось  smile  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)