Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.09.2015, 05:56   #1
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию Неактивные чекбоксы

Нужна помощь знающих синтаксис.
Есть скрипт:


Код HTML:
<form name="F1">
<input type = 'checkbox' id = 'ch1'/> 1-1<br>
<input type = 'checkbox' id = 'ch2'/>1-2<br>
<input type = 'checkbox' id = 'ch9'/>1-3<br>
</form>
</div>

<form name="F2">
<input type = 'checkbox' id = 'ch3'/>2-1<br>
<input type = 'checkbox' id = 'ch4'/>2-2<br>
<input type = 'checkbox' id = 'ch5'/>2-3<br>
<input type = 'checkbox' id = 'ch6'/>2-4<br>
</form>

<form name="F3">
<input type = 'checkbox' name="group" id = 'ch7'/>3-1<br>
<input type = 'checkbox' name="group" id = 'ch8'/>3-2<br>
</form>

<script>
var F1 = document.forms.F1;
F1.onchange = function() {
  var n = F1.querySelectorAll('[type="checkbox"]'),
      l = F1.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 1) {  //тут у меня кол-во чекбоксов в группе, колличество которых можно нажать одновременно. 
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false;
    } else {
      n[j].disabled = false; 
    }
}
var F2 = document.forms.F2;
F2.onchange = function() {
  var n = F2.querySelectorAll('[type="checkbox"]'),
      l = F2.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 1) {
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false;
    } else {
      n[j].disabled = false;
    }
}
var F3 = document.forms.F3;
F3.onchange = function() {
  var n = F3.querySelectorAll('[type="checkbox"]'),
      l = F3.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 1) { 
      n[j].disabled = true;
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; 
    } else {
      n[j].disabled = false; 
    }
}
</script>

Идея в том, что в определенной форме нажимается только допустимое колличество чекбоксов.
Вопрос в следующем:

Нужно сделать так, чтобы чекбоксы с одной формы не были задействованы, пока не включены чекбоксы из другой.

То есть, допустим, чекбокс 3-1 не должен включаться, пока не будет включен любой из чекбоксов формы №2, а чекбокс 3-2, пока не будет включен любой из чекбоксов формы №1. То есть, условие должно срабатывать для каждого чекбокса отдельно.
_dvr вне форума Ответить с цитированием
Старый 11.09.2015, 18:24   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Вариантов тут конечно очень много,

Можно вот так.

Код:
<!DOCTYPE html>
<html>
<head lang="US-en">
    <title>forms.html</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">

        // ================================================================================
        window.addEventListener("load", function(){

            _run();

        });

        var checkboxes;
        var _F1 = "F1";
        var _F2 = "F2";
        var _F3 = "F3";

        // ================================================================================
        function _run(){

            //-----------------------------------------------------------------------------
            _F1_checkboxes = document.forms[_F1].querySelectorAll('[type="checkbox"]');

            for(var i=0; i<_F1_checkboxes.length; i++){
                _F1_checkboxes[i].onchange = function(){
                    var _checkboxes = document.forms[_F1].querySelectorAll('[type="checkbox"]');

                    var _one_of_boxes_cheched = false;

                    for(var i=0; i<_checkboxes.length; i++){
                        if(_checkboxes[i].checked == true){
                            _one_of_boxes_cheched = true;
                            break;
                        }
                    }

                    if(_one_of_boxes_cheched){
                        _forms_controller(_F2, "enable");
                    }else{
                        _forms_controller(_F2, "disable");
                    }


                }
            }
            //-----------------------------------------------------------------------------
            _F2_checkboxes = document.forms[_F2].querySelectorAll('[type="checkbox"]');

            for(var i=0; i<_F2_checkboxes.length; i++){
                _F2_checkboxes[i].onchange = function(){
                    var _checkboxes = document.forms[_F2].querySelectorAll('[type="checkbox"]');
                    
                    var _one_of_boxes_cheched = false;

                    for(var i=0; i<_checkboxes.length; i++){
                        if(_checkboxes[i].checked == true){
                            _one_of_boxes_cheched = true;
                            break;
                        }
                    }

                    if(_one_of_boxes_cheched){
                        _forms_controller(_F3, "enable");
                    }else{
                        _forms_controller(_F3, "disable");
                    }

                }
            }
            //-----------------------------------------------------------------------------

        }
        // ================================================================================
        function _forms_controller(_form_name, _action){

            var _disabled = true;

            if(_action == "enable"){
                _disabled = false;
            }

            var checkboxes = document.forms[_form_name].querySelectorAll('[type="checkbox"]');
            
            for(var i=0; i<checkboxes.length; i++){
                console.log(checkboxes[i].id+" == "+checkboxes[i].disabled);
                checkboxes[i].disabled = _disabled; 
            }

        }
        // ================================================================================

    </script>
</head>
<body>

    <p>name="F1"</p>
    <form name="F1">
        <input type='checkbox' id='ch1'/>1-1
        <input type='checkbox' id='ch2'/>1-2
        <input type='checkbox' id='ch3'/>1-3
    </form>
    <hr/>

    <p>name="F2"</p>
    <form name="F2">
        <input type='checkbox' disabled id='ch4'/>2-1
        <input type='checkbox' disabled id='ch5'/>2-2
        <input type='checkbox' disabled id='ch6'/>2-3
        <input type='checkbox' disabled id='ch7'/>2-4
    </form>
    <hr/>

    <p>name="F3"</p>
    <form name="F3">
        <input type='checkbox' disabled name="group" id = 'ch8'/>3-1
        <input type='checkbox' disabled name="group" id = 'ch9'/>3-2
    </form>
    <hr/>

</body>
</html>
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 12.09.2015, 16:03   #3
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

Огромное спасибо.
И еще вопрос:
как можно исключения для чекбокса внести? То есть, допустим, 3-2 должен работать независимо от формы F2.
_dvr вне форума Ответить с цитированием
Старый 12.09.2015, 17:16   #4
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Код:
<!DOCTYPE html>
<html>
<head lang="US-en">
    <title>forms.html</title>
    <meta charset="utf-8"/>
    <script type="text/javascript">

        // ================================================================================
        window.addEventListener("load", function(){

            _run();

        });

        var checkboxes;
        var _F1 = "F1";
        var _F2 = "F2";
        var _F3 = "F3";

        // ================================================================================
        function _run(){

            //-----------------------------------------------------------------------------
            _F1_checkboxes = document.forms[_F1].querySelectorAll('[type="checkbox"]');

            for(var i=0; i<_F1_checkboxes.length; i++){
                _F1_checkboxes[i].onchange = function(){
                    var _checkboxes = document.forms[_F1].querySelectorAll('[type="checkbox"]');

                    var _one_of_boxes_cheched = false;

                    for(var i=0; i<_checkboxes.length; i++){
                        if(_checkboxes[i].checked == true){
                            _one_of_boxes_cheched = true;
                            break;
                        }
                    }

                    if(_one_of_boxes_cheched){
                        _forms_controller(_F2, "enable");
                    }else{
                        _forms_controller(_F2, "disable");
                    }


                }
            }
            //-----------------------------------------------------------------------------
            _F2_checkboxes = document.forms[_F2].querySelectorAll('[type="checkbox"]');

            for(var i=0; i<_F2_checkboxes.length; i++){
                _F2_checkboxes[i].onchange = function(){
                    var _checkboxes = document.forms[_F2].querySelectorAll('[type="checkbox"]');
                    
                    var _one_of_boxes_cheched = false;

                    for(var i=0; i<_checkboxes.length; i++){
                        if(_checkboxes[i].checked == true){
                            _one_of_boxes_cheched = true;
                            break;
                        }
                    }

                    if(_one_of_boxes_cheched){
                        _forms_controller(_F3, "enable");
                    }else{
                        _forms_controller(_F3, "disable");
                    }

                }
            }
            //-----------------------------------------------------------------------------

        }
        // ================================================================================
        function _forms_controller(_form_name, _action){

            var _disabled = true;

            if(_action == "enable"){
                _disabled = false;
            }

            var checkboxes = document.forms[_form_name].querySelectorAll('[type="checkbox"]');
            
            for(var i=0; i<checkboxes.length; i++){
                console.log(checkboxes[i].id+" == "+checkboxes[i].disabled);
                
                if(checkboxes[i].id == 'ch9'){
                    // Если id == ch9 тогда ничего не делать.
                }else{
                    checkboxes[i].disabled = _disabled;
                }
            }

        }
        // ================================================================================

    </script>
</head>
<body>

    <p>name="F1"</p>
    <form name="F1">
        <input type='checkbox' id='ch1'/>1-1
        <input type='checkbox' id='ch2'/>1-2
        <input type='checkbox' id='ch3'/>1-3
    </form>
    <hr/>

    <p>name="F2"</p>
    <form name="F2">
        <input type='checkbox' disabled id='ch4'/>2-1
        <input type='checkbox' disabled id='ch5'/>2-2
        <input type='checkbox' disabled id='ch6'/>2-3
        <input type='checkbox' disabled id='ch7'/>2-4
    </form>
    <hr/>

    <p>name="F3"</p>
    <form name="F3">
        <input type='checkbox' disabled name="group" id='ch8'/>3-1
        <input type='checkbox' name="group" id='ch9'/>3-2
    </form>
    <hr/>

</body>
</html>

Вот эта проверка делает теперь это

Если id елемента равен 'ch9' то не применять ни каких действий для него.

Код:
                if(checkboxes[i].id == 'ch9'){
                    // Если id == ch9 тогда ничего не делать.
                }else{
                    checkboxes[i].disabled = _disabled;
                }
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 12.09.2015 в 17:18.
pompiduskus вне форума Ответить с цитированием
Старый 12.09.2015, 17:22   #5
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

Спасибо большое. Сэкономили мне кучу времени. Я б неделю мануал курил)
или (||) работает?
_dvr вне форума Ответить с цитированием
Старый 12.09.2015, 17:26   #6
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Не зачно. Я только не понял, что ты имел введу про "или" ?
Если про вот это, то да.

Код:
if(checkboxes[i].id == 'ch9' || checkboxes[i].id == 'ch23' || checkboxes[i].id == 'ch4'){
    // Если id == ch9 тогда ничего не делать.
}else{
    checkboxes[i].disabled = _disabled;
}
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 12.09.2015, 17:30   #7
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

Да. Именно это и спрашивал. Я просто в явовском синтаксисе не силен) Как домашнее животное, все понимаю, но сказать ничего не могу
_dvr вне форума Ответить с цитированием
Старый 12.09.2015, 17:34   #8
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Цитата:
Как домашнее животное, все понимаю, но сказать ничего не могу
Хахахахах ну ты конь.
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 17.09.2015, 10:48   #9
_dvr
Пользователь
 
Регистрация: 29.07.2015
Сообщений: 15
По умолчанию

Нашел решение с JQuery:

Код:
(function($) {
$(function() {

       $('input.check').on('change', function() {
        if ($(this).is(':checked')) {
            $(".check_enable").removeAttr("disabled");  
        } else {
            $(".check_enable").attr("disabled","disabled");
        }
    });

})
})
Тоже неплохо работает.
_dvr вне форума Ответить с цитированием
Старый 17.09.2015, 11:18   #10
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Нуу воо.
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неактивные CheckBox JINC C++ Builder 5 21.05.2015 13:22
неактивные кнопки NARTZISS Общие вопросы .NET 5 21.12.2009 12:05
Неактивные листбоксы vadzik Microsoft Office Excel 15 06.11.2007 22:48