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

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

本文关键字：复选框 checkbox html 其他 使用 一个      更新时间：2024-06-07

我正在尝试在选中一个复选框时禁用其他复选框，如果再次取消选中，则再次启用
下面是我在一个标准复选框的示例fiddle中发现的一段代码，但我无法将其复制到checkbox中，有人能推荐我需要做的更改吗？

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

下面是我打电话给的支票

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

如果想使用复选框，可以使用此代码，否则最好使用单选按钮而不是

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的演示

您可以将单选按钮用作：

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

Okey。例如，您有类似的型号ForRadioButtonsModel

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

在视图中，您通过此模型的集合或包含此集合的模型

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

Than在视图中，您可以下一步创建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">

因此，您将拥有名称相同但值不同的单选按钮

相关文章：