CODEWITHSUNDEEP
javascripthtmlformscheckboxselectors-api
CheeseFlavored
CheeseFlavored

Reputation: 2112

javascript - prevent checkboxes from becoming both checked AND disabled

I have a program where javascript changes several checkboxes, making them, disabled, checked, or unchecked based on what other boxes are checked. I've noticed that if you have a checked checkbox and then you make it disabled, it can be both checked and disabled at the same time. I don't want this to ever be possible. I want any checkbox that becomes disabled, to also become unchecked. I was looking for an easy way to do it. I thought queryselectorall would work. Here's a simplified example. In this example, I made one of the boxes checked AND disabled by default. If you click another box, it should get rid of the check in the disabled box. I thought this simple function would do that, but it doesn't work.

 function fixit() {
    document.querySelectorAll('input[type="checkbox"]:checked:disabled').checked=0;
    }
    <form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Upvotes: 0

Views: 1520

Answers (4)

StackSlave
StackSlave

Reputation: 10627

First of all use external JavaScript, putting the <script type='text/javascript' src='external.js'></script> in your <head>

external.js

var pre = onload, doc, bod, htm, E, fixIt;
onload = function(){
if(pre)pre();

doc = document, bod = doc.body;
E = function(id){
  return doc.getElementById(id);
}
fixIt = function(formElement){
  var es = formElement.elements;
  for(var i=0,e,l=es.length; i<l; i++){
    e = es[i];
    if(e.disabled && e.checked){
      e.checked = false;
    }
  }
}
fixIt(E('theform')); // use whenever

}

Upvotes: 0

Gal Koren
Gal Koren

Reputation: 73

function fixit() {
document.querySelectorAll('input[type="checkbox"]:checked:disabled').forEach(function(x) {
x.checked = 0;
});

}
<form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Upvotes: 1

stldoug
stldoug

Reputation: 850

You can use the HTML DOM removeAttribute() Method.

function fixit() {
  var i, cb = document.querySelectorAll('input[type="checkbox"]:checked:disabled');
  for (i = 0; i < cb.length; i++) {
    cb[i].removeAttribute("checked");
  }
}
<form id='theform' name='mainform' method='post' action='#'>
  box1
  <input onClick='fixit()' type='checkbox' disabled checked>box2
  <input onClick='fixit()' type='checkbox'>box3
  <input onClick='fixit()' type='checkbox'>
</form>

Edit: I forgot to loop through the returned checkboxes array.

Upvotes: 1

Jamiec
Jamiec

Reputation: 136134

querySelectorAll returns an element list, which does not have a property checked. You need to iterate over the list of elements and apply your change.

function fixit() {
  var cbs = document.querySelectorAll('input[type="checkbox"]:checked:disabled');
  for(var i = 0;i<cbs.length;i++){
    cbs[i].checked = 0;
  }
}
<form id='theform' name='mainform' method='post' action='#'>
    box1<input onClick='fixit()' type='checkbox' disabled checked> 
    box2<input onClick='fixit()' type='checkbox'>
    box3<input onClick='fixit()' type='checkbox'>
    </form>

Upvotes: 4

Related Questions