如果我选中一个复选框，如何禁用其他复选框（动态创建）？

Question

如果我单击一个我使用 input type=checkbox

动态创建的复选框，如何禁用其他复选框

@if (ViewBag.Products != null)
{
    foreach (var item in ViewBag.Products)
    {
        <label class="PillList-item">
            <input id="Check" type="CheckBox" name="@item.ProductID"/>
            <span class="PillList-label" >
                @item.Products
                <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>
            </span>
        </label>
    }
}

Answer 1

尝试使用以下代码：

@section Scripts{
        <script>
            $(document).ready(function () {
                $('input:checkbox').click(function () {
                    $('input:checkbox').not(this).prop('checked', false);
                });
            });
           
        </script>
    }

Answer 2

首先更新动态复选框代码，添加 'chkInfo' 作为 class 值，即

foreach (var item in ViewBag.Products)
{
    <label class="PillList-item">

        <input id="Check" type="CheckBox" name="@item.ProductID" class="chkInfo" onclick="Javascript:{UncheckAll_js(this)}"/>

        <span class="PillList-label" >

            @item.Products

            <span class="Icon Icon--checkLight Icon--smallest"><i class="fa fa-check"></i></span>

         </span>
    </label>
}

然后使用下面的 Java 脚本取消选中所有不需要的复选框，即

// Global variable to access jQuery method from JavaScript method.
var uncheckAll_jq;

// jQuery method goes here.
$(document).ready(function() 
{
    // This method will disable all the check boxes except the one which is checked
    uncheckAll_jq = function UncheckAll(currentCheckBox) 
    {
        // First unchecheck all
        $(".chkInfo").removeAttr('checked');

        // Then check your target checkbox as already checked.
        $(currentCheckBox).attr("checked", true);
    }
});

// JavaScript codes goes here.
function UncheckAll_js(currentCheckBox_info)
{
   // Invoke jQuery Method.
   UncheckAll_jq(currentCheckBox_info);
}

希望对您有所帮助！！

如果我选中一个复选框，如何禁用其他复选框（动态创建）？

How can I disable other checkboxes(Dynamically Created) if I checked one?

javascript

html

jquery

asp.net-mvc

asp.net-core