How do I disable a checkbox when another checkbox is ticked & re-enable when unticked?

Question

I am currently using Javascript to try attempt this, could it be the way I am linking the checkbox to the script? If so any advice would be helpful. Edit- The checkboxes are within a foreach loop and radio boxes will not work as this is not the exact situation I am using this in.

Checkboxes

@Html.CheckBoxFor(modelItem => item.ambassador, htmlAttributes: new { @class = "checkbox", type = "checkbox" })

@Html.CheckBoxFor(modelItem => item.groupSelection, htmlAttributes: new { @class = "checkbox", type = "checkbox" })

Javascript

<script>
    $('.checkbox').change(function () {
        $(this).siblings('.checkbox').prop('disabled', this.checked);
    });
</script>

The Javascript code is from this question: Disable Checkbox on selecting another checkbox in mvc4

Not related, but remove `new { type = "checkbox" }` - the `CheckBoxFor()` already add that — , Jan 26 '17 at 23:29
Is your script after the html for the checkboxes (immediately before the closing `
` tag)? — , Jan 26 '17 at 23:30
And your code suggests this is in a loop using a `foreach` loop which means it will not bind correctly (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) for an explanation) — , Jan 26 '17 at 23:32
@StephenMuecke Huh? It's in a change listener callback function — mhodges, Jan 26 '17 at 23:35
@mhodges, Binding has nothing to do with the script (I just pointing out that the code will not bind to OP's model when they submit) — , Jan 26 '17 at 23:36
And the script works fine - refer [this fiddle](https://jsfiddle.net/dm68op78/) — , Jan 26 '17 at 23:37
The script is after the html for the checkboxes and I am not using any body or header tags, it is done in cshtml. — Kaiwei Wu, Jan 26 '17 at 23:55
The fiddle proves your code works - clicking on one of the checkboxes will disable the other one. What problem are you having? — , Jan 27 '17 at 00:04
You are right before, this is in a foreach loop which is probably why the it is not linking to the script correctly. — Kaiwei Wu, Jan 27 '17 at 00:41

score 0 · Answer 1 · edited Apr 13 '17 at 12:32

HTML already has a built-in for this, they're called radio buttons:

<form>
  <input type="radio" name="option" value="first">
  <label for="first">first</label>
  <input type="radio" name="option" value="second">
  <label for="second">second</label>
</form>

From EchoEcho:

Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use check boxes instead.

Because you only want the user to be able to select one of the two options at a time, you should use radio buttons.

See also this ux.SE post on the subject.

score 0 · Answer 2 · answered Jan 27 '17 at 00:20

maybe your checkboxes are being loaded after the script is loaded.. ajax? partial? try adding the listener to your body or a parent element

$(function(){
  $('body').on('click', '.checkbox', function () {
    $(this).siblings('.checkbox').prop('disabled', this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox" type="checkbox"></input> check 1<br>
<input class="checkbox" type="checkbox"></input> check 2<br>
<input class="checkbox" type="checkbox"></input> check 3<br>
<input class="checkbox" type="checkbox"></input> check 4<br>

How do I disable a checkbox when another checkbox is ticked & re-enable when unticked?

2 Answers2