javascript - prevent checkboxes from becoming both checked AND disabled

Question

javascript - prevent checkboxes from becoming both checked AND disabled

1.4k Views Asked by CheeseFlavored At 19 October 2024 at 21:34

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>

Original Q&A

There are 4 best solutions below

stldoug On 07 January 2017 at 01:25

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.

Gal Koren On 07 January 2017 at 01:32

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>

StackSlave On 07 January 2017 at 01:38

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

}

**Jamiec** · Accepted Answer

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>

javascript - prevent checkboxes from becoming both checked AND disabled

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in FORMS

Related Questions in CHECKBOX

Related Questions in SELECTORS-API

Trending Questions

Popular # Hahtags

Popular Questions