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
– Josh Sanger, Commented Apr 12, 2017 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
– espresso_coffee, Commented Apr 12, 2017 at 19:13

indubitablee · Accepted Answer · 2017-04-12 19:28:21Z

8

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.

edited Apr 12, 2017 at 19:28

answered Apr 12, 2017 at 19:21

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

espresso_coffee Over a year ago

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?

indubitablee Over a year ago

@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

espresso_coffee Over a year ago

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('<cfoutput>#Trim(myData.progress)#</cfoutput>');

indubitablee Over a year ago

you can trigger the click of that element with jquery as if you were clicking it on the dom

indubitablee Over a year ago

stackoverflow.com/questions/8206565/…

James · Accepted Answer · 2017-04-12 19:48:34Z

6

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>

answered Apr 12, 2017 at 19:48

James

22.4k5 gold badges30 silver badges44 bronze badges

1 Comment

Ayan Over a year ago

Nice and clean code, worked for me

Oen44 · Accepted Answer · 2017-04-12 19:25:40Z

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>

Rafael Kennedy · Accepted Answer · 2017-04-12 19:30:43Z

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>

Vishal · Accepted Answer · 2020-03-31 07:59:03Z

0

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

 }

edited Mar 31, 2020 at 7:59

Vishal

74211 silver badges32 bronze badges

answered Jan 8, 2020 at 8:26

Maya

1702 silver badges4 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Linked

Related