If check box checked disable other, if unchecked enable all JavaScript?

Question

I have group of checkbox buttons, if I click and check one I want other check boxes to be set to disable. Also if I click to the same and uncheck I want all of them to be enabled. My logic works if I checked the checkbox but if I click again all of them are disabled. Here is my code:

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td></tr>

function ckChange(ckType){
        var ckName = document.getElementsByName(ckType.name);

        for(var i=0; i < ckName.length; i++){
            if(!ckName[i].checked){
                ckName[i].disabled = true;
            }else{
                ckName[i].disabled = false;
            }
        } 
    }

My current code is failing to set disable attribute to true and false when check box is checked. If you see where is the problem in my code please let me know. I have tried to make this function to work for any set of checkboxes. If you see any way to improve this I would like to hear that.

Silly question. Could you use radio buttons instead? If they have the same Name attribute, you cannot select more than 1 — Josh Sanger, Apr 12 '17 at 19:11
I have to use checkbox elements, question might be silly but I'm trying to get this to work if possible. — espresso_coffee, Apr 12 '17 at 19:13

indubitablee · Accepted Answer · 2017-04-12T19:28:21.117

add a simple if else statement that checks if the checkbox is checked or not. if its checked, disable all other check boxes. if not checked, enable all check boxes

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td></tr>

<script>
function ckChange(ckType){
    var ckName = document.getElementsByName(ckType.name);
    var checked = document.getElementById(ckType.id);

    if (checked.checked) {
      for(var i=0; i < ckName.length; i++){

          if(!ckName[i].checked){
              ckName[i].disabled = true;
          }else{
              ckName[i].disabled = false;
          }
      } 
    }
    else {
      for(var i=0; i < ckName.length; i++){
        ckName[i].disabled = false;
      } 
    }    
}
</script>

ps. the problem with your code is that the for loop is executing no matter what. so if you check something, it disables all unchecked, but if you uncheck something, the loops disables all checkboxes since all of them are now unchecked. thats why the if statement I added works. it differentiates if the checkbox is being checked or unchecked and then executes the desired functionality.

I have a question and I'm not sure if this is the best way to do it. Once I load my page I have to check my check box based on the value from Database. One of the check boxes from the group might be checked, if it is check then I have to disable the rest of the check boxes with the same element name. Should I try to use the same function or that should be separate javascript function? — espresso_coffee, Apr 14 '17 at 13:37
@espresso_coffee you can use the same function. you can trigger the click once the page loads based on the data from the data base — indubitablee, Apr 14 '17 at 14:22
But I will pass the value in my function, and that's different than how function works now. I tried and that did not work. Here is what I have tried: ckChange('#Trim(myData.progress)#'); — espresso_coffee, Apr 14 '17 at 14:33
you can trigger the click of that element with jquery as if you were clicking it on the dom — indubitablee, Apr 14 '17 at 14:34
http://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript — indubitablee, Apr 14 '17 at 14:36

score 6 · Answer 2 · answered Apr 12 '17 at 19:48

Same thing again, shorter code. Logically "the current checkbox should be enabled iff (the clicked checkbox is not checked) or (the current checkbox is the clicked checkbox)"

function ckChange(el) {
  var ckName = document.getElementsByName(el.name);
  for (var i = 0, c; c = ckName[i]; i++) {
   c.disabled = !(!el.checked || c === el);
  }
}

<tr>
  <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>

Nice and clean code, worked for me – Ayan Mar 30 '22 at 05:36 — Ayan, Mar 30 '22 at 05:36

score 3 · Answer 3 · answered Apr 12 '17 at 19:25

There you go, working as you want.

function ckChange(ckType) {
  var ckName = document.getElementsByName(ckType.name);

  for (var i = 0; i < ckName.length; i++) {
    if (!ckType.checked) {
      ckName[i].disabled = false;
    } else {
      if (!ckName[i].checked) {
        ckName[i].disabled = true;
      } else {
        ckName[i].disabled = false;
      }
    }
  }

}

<tr>
  <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>

score 1 · Answer 4 · answered Apr 12 '17 at 19:30

Another possible implementation:

function ckChange(el) {
  var ckName = document.getElementsByName(el.name);
  if (el.checked) {
    for (var i = 0; i < ckName.length; i++) {
      ckName[i].disabled = ckName[i] !== el;
    }
  } else {
    for (var i = 0; i < ckName.length; i++) {
      ckName[i].disabled = false
    }
  }

}

<tr>
  <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td>
</tr>
<tr>
  <td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</td>
</tr>

score 0 · Answer 5 · edited Mar 31 '20 at 07:59

My implementation, i little dirty. I'll refactor later

function DsChecks(value){   var chcks = []
      chcks = document.getElementsByName("tipoPerfil")
      for(var i = 0; i < chcks.length; i++){
           chcks[i].disabled = true;
      }
      for(var i = 0; i < chcks.length; i++){
         if(chcks[i].value == value && chcks[i].checked){
              chcks[i].disabled = false;
         }
         else if(chcks[i].value == value && !chcks[i].checked){
          for(var i = 0; i < chcks.length; i++){
          chcks[i].disabled = false;
            }
         }
      }

 }

If check box checked disable other, if unchecked enable all JavaScript?

5 Answers5