一个复选框可禁用某些CheckBoxFor

时间:2019-02-20 14:57:59

标签: javascript jquery asp.net-mvc razor

我正在开发MVC程序。

我在视图中使用 Razor 语言通过 CheckBoxFor 显示项目列表(从数据库通过控制器/模型):

for (int i = 0; i < Model.ProjectList.Count; i++)
    {
        @Html.HiddenFor(m => m.ProjectList[i].Id)
        <li>@Html.CheckBoxFor(m => m.ProjectList[i].IsChecked,
        new { id = "projectList_" + i, className = "CheckBoxProject" }) 
        @Model.ProjectList[i].Name</li>
    }

这部分工作正常。

我想添加另一个CheckBox取消选中并禁用以前的ChekBoxFor,并阻止对其进行检查。 我试图通过在视图的末尾处放置一些JavaScript来做到这一点:

<input type="checkbox" id="SetBox" value="SetBox" onclick="CheckBoxState(this);">

<script type="text/javascript" onload="loaded=1">
function CheckBoxState(elementRef) {
        document.querySelectorAll('.CheckBoxProject').checked = false;
        document.querySelectorAll('.CheckBoxProject').disabled = true;
};

因此,如果我了解自己的所作所为,则“ onclick” 应该调用名为“ CheckBoxState” 的Javascript函数。然后,抓住所有具有类名 CheckBoxProject 的CheckBox,取消选中并禁用它们。

当我在Firefox中尝试时,当我检查最后一个CheckBox并且页面检查器显示类似(不是英语)的警告时,没有任何反应: 无法加载源代码为“ http://localhost:..../browserLink

我不确定如何告诉View我正在使用Javascript,并且 Razor 语言是否可以与 Javascript 一起使用。

我尝试了不同的方式来编写JavaScript代码,具体取决于我在StackOverflow上找到的内容,几次失败后我辞职了...

1 个答案:

答案 0 :(得分:0)

最后我发现了一些与jQuery兼容的东西(我不知道):

<input type="checkbox" id="SetBox"> <label>Uncheck and disable other Checkbox</label>

<script type="text/javascript">

// Call function when the element with the id = SetBox is clicked
$('#SetBox').click(function(){

    var SetBox = document.getElementById("SetBox");

    if (SetBox.checked)
    {
        // select all checkbox (even SetBox) and unchecked + disabled them
        $('input:checkbox').prop('checked', false);
        $('input:checkbox').prop('disabled', true);

        // select only SetBox and check + enable it.
        $('#SetBox').prop('checked', true);
        $('#SetBox').prop('disabled', false);

    }
    else
    {
        // Make all checkbox available if SetBox is unchecked.
        $('input:checkbox').prop('disabled', false);
    }
});

它与Html.CheckBoxFor()一起使用。

我仍然有警告:无法加载源为“ http://localhost:..../browserLink”的脚本 但这似乎并不重要。

我希望这以后可以帮助别人。