When check all space checkbox other checkboxes to be unchecked and disabled

Question

I have a group of checkbox that indicates a house spaces, the last checkbox is for the house all space. I want to disable and uncheck other checkboxes when I check "All space" checkbox. what is its javascript code?

 <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>

Answer 1

   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;
            }
        }
     }
    }

}

// By Jquery, Put it in your AllCk() function

 $("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);

Hope it helps you !

Answer 2

Assuming the fact that All sapce checkbox is the last checkbox in the series, your AllCk() function should be like this:

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;
    }
}

When check all space checkbox other checkboxes to be unchecked and disabled

Question

2 answers

solution1
0 ACCPTED 2017-07-22 13:46:59

solution2
0 2017-07-22 13:47:04

When check all space checkbox other checkboxes to be unchecked and disabled

Question

2 answers

solution1 0 ACCPTED 2017-07-22 13:46:59

solution2 0 2017-07-22 13:47:04

solution1
0 ACCPTED 2017-07-22 13:46:59

solution2
0 2017-07-22 13:47:04