Auto disable other checkboxes using html.checkboxfor once one is selected

Question

I am trying to disable other checkboxes on selection of one checkbox and enable again if this has again been de-selected.
Below is a snippet of code I found that worked during an example fiddle for a standard checkbox but I have not been able to replicate this for a checkboxfor, can someone please recommend the changes I need to make in order for this to work in a checkboxfor?

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

And below is my checkboxfor where I am calling this

@Html.CheckBoxFor(modelItem => item.IsDisplayImage, new { id = "chkItems" })

As @guradio said, it's better to use radio buttons... just set them in one radio-group (radiobutton must have same name to be in one radio-button-group) — demo, Apr 13 '16 at 08:37
Hi @demo do you mind showing me, I haven't used radiobuttons before, I will mark you as the answer — cg91, Apr 13 '16 at 08:41
@cg91 , check this question http://stackoverflow.com/questions/22174475/multiple-radio-button-groups-in-mvc-4-razor — demo, Apr 13 '16 at 08:42

score 0 · Answer 1 · answered Apr 13 '16 at 08:35

You can use this code if want to persist using checkboxes otherwise its better to use radio button instead

HTML

<label class="checkbox-inline check">
      <input type="checkbox" name="skills" id="radio" value="1"> 1
</label>
<label class="checkbox-inline check">
      <input type="checkbox" name="skills" value="2"> 2
</label>
<label class="checkbox-inline check">
      <input type="checkbox" name="skills" value="3"> 3
</label>

JS:

$('.check input:checkbox').click(function() {
    $('.check input:checkbox').not(this).prop('checked', false);
});

Check this jsfiddle for the demo

You can use radio buttons as :

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form>

Thanks but how do i do this using a @html.checkboxfor or radiobuttonfor? — cg91, Apr 13 '16 at 08:38

score 0 · Answer 2 · answered Apr 13 '16 at 08:54

Okey. For example you have model ForRadioButtonsModel like

public class ForRadioButtonsModel
    {
        public int Id { get; set; }
        public bool IsDisplayImage { get; set; }
    }

On View You pass Collection of this models or model that contains this collection

return View((List<ForRadioButtonsModel>) collection);

Than In view you can do next to create RadioGroup

@foreach (var item in Model) <-- Model is of type List<ForRadioButtonsModel>
{
     @Html.RadioButtonFor(m => item.IsDisplayImage, item.IsDisplayImage) 
}

This will render next HTML

<input checked="checked" id="item_IsDisplayImage" name="item.IsDisplayImage" type="radio" value="True">
<input checked="checked" id="item_IsDisplayImage" name="item.IsDisplayImage" type="radio" value="False">

So You will have radioButtons with same name, but with different values

Ok I just realised I may potentially have to pass the isdisplayimage back as null at some stage (ie no values selected) is this still possible with radiobutton? — cg91, Apr 13 '16 at 09:09

Auto disable other checkboxes using html.checkboxfor once one is selected

2 Answers2