Disable Checkbox after checking another checkbox - one of them is in an array

#1

The below script code works if you have the same name values, but I don’t.
What I want to do is to have these scenarios:
If checkbox name1/value1 is checked, then disable 2,3,4.
If checkbox name2/value2 is checked, then disable 1,3,4.
If checkbox name3/value3 is checked, then disable 1,2,4.
If checkbox name4/value4 is checked, than allow all to be checked, but disable 1,2,3. Name4/value4 is in an array - the reason that as many as necessary can be checked.
Having difficulty figuring this out, beyond my scope of ability. This might even be a challenge for @PaulOB which is a wiz at this!

Thanks in advance if anybody can help. Very much appreciated.

function ckChange(el) {
  var ckName = document.getElementsByName(el.name);
  for (var i = 0, c; c = ckName[i]; i++) {
   c.disabled = !(!el.checked || c === el);
  }
}
<input type="checkbox" name="name1" value="value1" onClick="ckChange(this)">
<input type="checkbox" name="name2" value="value2" onClick="ckChange(this)">
<input type="checkbox" name="name4" value="value3" onClick="ckChange(this)">
<input type="checkbox" name="name4" value="value4" onClick="ckChange(this)">
#2

If I’m understanding your needs a correctly, you need a radio group instead of checkboxes.

1 Like
#3

No, I already have checkboxes and have been using them for years, so I don’t want to change that. I just want an onclick to handle the scenarios that I have been handling with asp code once submitted. So thought it would be better to handle those by disabling checkboxes.

#4

It’s not a good idea to use a whole lot of JavaScript to make checkboxes behave like radio buttons, when radio buttons are already fully supported by all web browsers.

1 Like
#5

Well you are the expert at that - something I didn’t realize. I haven’t had any issues with checkboxes, but if I understand you correctly, the issue would be the JS. I would have to look into making that change to radio buttons since have been using check boxes. Appreciate and respect your opinion, although sorry that it’s not a good idea to do this. Thanks

1 Like
#6

I substituted my check boxes to radio buttons and that’s going to work because with the radio button on the array, you can only pick one choice. Radio buttons is an either or type selection and it’s not suitable for multiple selections.

Can the script I submitted earlier use an id or class rather than a name?

#7

That’s fine. As single selection is the majority behaviour that’s used, the last item can be a checkbox instead of a radio. When that checkbox is selected, scripting can be used to change the type attribute of the others from radio to checkbox. When the checkbox of the last item is not selected, that can change the other items back to radio.

That way the user gains immediate and good interface feedback about what behaviour is allowed or not.

#8

I guess we are not on the same page. I don’t want single selection. I need to have all as check boxes, especially name4/value4 which is an array with about 20 selections which the user can pick as many as they want. But if they choose name4/value4 they can’t pick the others; hence the reason for the disable. So apparently JS is not able to handle that.

#9

JavaScript can easily disable access to the other radio buttons when the 4th option is selected. But there’s a problem. How do you deal with someone mistakenly selecting the last option? They can’t undo their mistake, and the other option that they really want is no longer available.

Options by default mean that the other options are not available. To deliberately disable the other options seem to just make things worse, instead of better.

When the name4 option is selected, none of name1/2/3 are selected.
When someone changes their mind and goes from name4 to name2, name4 is no longer selected.

That’s how options work. I don’t think I’ve seen anything from you yet that requires anything different from how options normally work.

#10

The last option has many selections which is why it needs to be a check box. If they change their mind they can undo (uncheck) their selection and then they can go back and selection option 1 or 2. But if 1 and 2 are radio button then they can’t because of indecision change their mind. Therefore, if all were check boxes if they check a couple of boxes in 4 then 1 and 2 can’t be check, which is what I want. If they change their mind they can uncheck 4 which will open up the selection of 1 or 2.

Yes which is what I want. But again, if they change their mind and uncheck it opens up to all selections available for 1,2,3.

#11

From what I’m understanding, your requirements are all met by having name1/2/3/4 all as radio options.
A separate group of checkboxes can be made visible only when name4 is selected, which doesn’t require JavaScript either.

Would you like to see an example?

#12

Sure.

Perhaps your example will provide for this, but if radio 1 is checked they can toggle to let’s say 2. Which is what radio buttons do. If any number of selections are made in 4 then 1,2,3 are disabled. Perfect there, but if user changes mind they need to be able to go back to 1,2,or 3. Edit – they always need the ability to go back to 4 to be clear.

#13

[quote=“javascript7, post:12, topic:327654, full:true”]

Sure.

Here is an example that I’ve just now created: https://jsfiddle.net/pmw57/a7gxmn81/

I’ve used unstyled listitems for indenting, but there are plenty of other ways of doing it.

<form>
  <ul>
    <li>
      <input type="radio" name="group" value="value1" id="radio1">
      <label for="radio1">Name 1</label>
    </li>
    <li>
      <input type="radio" name="group" value="value2" id="radio2">
      <label for="radio2">Name 2</label>
    </li>
    <li>
      <input type="radio" name="group" value="value3" id="radio3">
      <label for="radio3">Name 3</label>
    </li>
    <li>
      <input type="radio" name="group" value="value4" id="radio4">
      <label for="radio4">Name 4</label>
      <ul>
        <li>
          <input type="checkbox" name="4.1" value="4.1" id="check1">
          <label for="check1">Checkbox 1</label>
        </li>
        <li>
          <input type="checkbox" name="4.2" value="4.2" id="check2">
          <label for="check2">Checkbox 2</label>
        </li>
        <li>
          <input type="checkbox" name="4.3" value="4.3" id="check3">
          <label for="check3">Checkbox 3</label>
        </li>
        <li>
          <input type="checkbox" name="4.4" value="4.4" id="check4">
          <label for="check4">Checkbox 4</label>
        </li>
      </ul>
    </li>
  </ul>
</form>

The CSS to initially hide the 4th group checkboxes and show them when the 4th is checked, is:

li {
  list-style-type: none;
}
[value="value4"] ~ ul {
  display: none;
}
[value="value4"]:checked ~ ul,
[value="value4"]:checked + label ~ ul {
  display: block;
}

The example using the above code is found at https://jsfiddle.net/pmw57/a7gxmn81/

I’m sure though that the people in the CSS forum might have better ways to achieve this.

1 Like
#14

That is very nice so thank you for that.
2 issues as I see it. (1) I need all check boxes to appear on the page without clicking the radio button. (2) Since 4 is in an array, there would be only one id. I suppose there is asp code that can do that, but would have to figure that out, unless you know. So is it possible for just check boxes for 4?

#16

You can remove the CSS display code to leave the checkboxes visible.

I recommend that you further take this up with people in the CSS forum.

1 Like
#17

Great - I think I can figure out the array but you gave me something good to work with. Probably don’t need any CSS work because I need to incorporate your code into my existing with the array.

Thank you for this and I really appreciate the time you took. I will let you know once I finish adding this to my code.

#18

Looking further at the code, I need this to work with just using an ID. I don’t want to change name or value. If I have to change name and value, it would require somewhat of a complete overhaul to the post page. Can this be done with just using ID?

#19

As my example already uses ID, you leave me in a puzzled situation.

Can you please provide clarification about what you mean by just using ID?

#20

Meaning is there a way to just use ID for this and not use the name=group? I am set up on the form post with different names and was hoping to use just ID as a check for the JS.

#21

With forms, none of the ID attributes get submitted. It’s only name/value that get submitted with forms.