При установке флажка для всего пространства другие флажки должны быть сняты и отключены.

У меня есть группа флажков, которая указывает на пространство дома, последний флажок предназначен для всего пространства дома. Я хочу отключить и снять другие флажки, когда я устанавливаю флажок «Все пространство». каков его код javascript?

 <html>
 <label  class="input-group-addon">
                          <input type="checkbox" value="1" id="rndr-lobby" 
 name="rndr-int-options"  />
                          Lobby </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.4" id="rndr-room" 
 name="rndr-int-options" />
                         Room </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.5" id="rndr-living" name="rndr-int-options" />
                          Living </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.6" id="rndr-wc" name="rndr-int-options" />
                         WC </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-kitchen" name="rndr-int-options" />
                          Kitchen </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-office" name="rndr-int-options" />
                          Office </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-saloon" name="rndr-int-options" />
                          Saloon  </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-all" name="rndr-int-options" onchange="AllCk();"/>
                         All sapce</label>
 </html>
    <script>

document.getElementById('rndr-all').onchange = function() {AllCk();};

var  AllCk = function () {
    var RndrLob = document.getElementById("rndr-lobby"),
        RndrRoo = document.getElementById("rndr-room"),
        RndrLiv = document.getElementById("rndr-living"),
        RndrWc =  document.getElementById("rndr-wc"),
        RndrKit = document.getElementById("rndr-kitchen"),
        RndrOff = document.getElementById("rndr-office"),
        RndrSal = document.getElementById("rndr-saloon"),
        RndrAll = document.getElementById('rnder-all').checked;

    if (RndrAll === true) {

        RndrLob.disabled = true; RndrLob.checked = false;
        RndrRoo.disabled = true; RndrRoo.checked = false;
        RndrLiv.disabled = true; RndrLiv.checked = false;
        RndrWc.disabled  = true; RndrWc.checked  = false;
        RndrKit.disabled = true; RndrKit.checked = false;
        RndrOff.disabled = true; RndrOff.checked = false;
        RndrSal.disabled = true; RndrSal.checked = false;
        RndrAll.disabled = true; RndrAll.checked = false;

    }


};
    </script>

javascript checkbox disabled-input unchecked
person Farbod.T    schedule 22.07.2017    source источник
comment
где то, что вы пробовали?   -  person Bakhtiiar Muzakparov    schedule 22.07.2017

Ответы (2)


arrow_upward
0
arrow_downward 

   function AllCk() {
        if (document.querySelector('#rndr-all').checked) {
        var inputs = document.getElementsByTagName("input");
          for (var i = 0; i < inputs.length; i++) {
             if (inputs[i].type == "checkbox") {
            if (inputs[i].id != "rndr-all") {
                inputs[i].checked = false;
                inputs[i].disabled = true;
            }
        }
     }
    } else {
     var inputs = document.getElementsByTagName("input");
     for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {

            if (inputs[i].id != "rndr-all") {
                inputs[i].disabled = false;
            }
        }
     }
    }

}

// С помощью Jquery поместите его в свою функцию AllCk()

 $("input[id='rndr-all']").is(":checked") ? 
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('checked', false).prop('disabled', true) :
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('disabled', false);

Надеюсь, это поможет вам!

person Saurabh Yadav    schedule 22.07.2017
comment
оно работает. могу я попросить вас показать мне ту же версию jquery этого кода? - person Farbod.T; 22.07.2017

arrow_upward
0
arrow_downward

Предполагая, что флажок All sapce является последним флажком в серии, ваша функция AllCk() должна выглядеть так:

function AllCk(){
    var spaces = document.getElementsByName("rndr-int-options");
    for (var i = 0; i < spaces.length - 1; i++) {
        if(spaces[i].checked)
            spaces[i].checked = false;
    }
}
person Rajdeep Paul    schedule 22.07.2017