samedi 30 mai 2020

Is there a way to disable checkboxes with different names and id, if radio button is checked?

I figured out the solution, but the name attribute must be the same or it won't work. I was thinking of auto-incrementing the id attribute someway, but I had no luck so far. Here's what I have so far(that works):

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 {
      if (ckName[i].checked) {
        ckName[i].disabled = false;
      }
    }
  }
}
<form>
 <input type="radio" name="No Past Conditions" id="rb0" onclick="ckChange(this)" />
   <label for="rb0">No Past Conditions </label>
          
 <input type="checkbox" name="No Past Conditions" id="cb1" value="Yes" onclick="ckChange(this)" />
   <label for="cb1">Heart disease </label>

<!-- WORKS GREAT IF NAME IS THE SAME, HOWEVER I WANT TO CHANGE IT IN ORDER FOR READABILITY WHEN I COLLECT THE FORM -->

<!-- this part here doesn't work, bcz the name attrib is different -->
  <input type="checkbox" name="Anemia or other blood disease" id="cb2" value="Yes" />
          <label for="cb2">Anemia or other blood disease</label>
  <input type="checkbox" name="Severe headaches" id="cb3" value="Yes" />
          <label for="cb3">Severe headaches</label>
</form>

Now I tried declaring a checkbox variable to be autoincremented, using the base id name(cb: checkbox) + j(concatenating it I guess?) but that's not the right syntax I think. Code:

var j;
var checkbox = document.getElementById(cb + j);
for (var j = 0; j < 20; j++)

Clearly I know it's wrong but I've searched for hours and I'm really upset. Can you guys help me?

Edit:@shingo.nakanishi answer generates this error @shingo.nakanishi answer generates this error




Aucun commentaire:

Enregistrer un commentaire