选择一个后,使用html.checkbox自动禁用其他复选框

时间:2016-04-13 08:27:44

标签: javascript jquery html razor checkboxfor

我试图在选择一个复选框时禁用其他复选框,如果再次取消选中,则再次启用。
下面是我发现的代码片段,它在标准复选框的示例小提琴中工作但是我无法复制这个复选框,有人可以推荐我需要做的更改,以便在复选框中工作吗?

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

以下是我的复选框,我称之为

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

2 个答案:

答案 0 :(得分:0)

如果想要使用复选框保留,则可以使用此代码,否则最好使用单选按钮

<强> 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);
});  

检查此jsfiddle以查找demo

您可以使用单选按钮:

<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> 

答案 1 :(得分:0)

奥基。例如,您有模型ForRadioButtonsModel,如

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

在视图上您传递包含此集合的此模型或模型的集合

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

比在视图中你可以做下一步创建RadioGroup

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

这将呈现下一个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">

所以你的radioButtons名称相同,但值不同