在更改时影响复选框属性

本文关键字:复选框 属性 影响 | 更新日期: 2023-09-27 18:04:01

目的是检查两个字段(用户名和密码)是否输入了文本,如果有,选中复选框,如果没有,取消选中复选框。

如果我在两者中都输入文本,它就可以工作。如果我删除用户字段中的文本,它将取消选中;但是,如果我在用户字段中重新输入一个字符,该框将不会重新检查。会发生什么?

<div class="controls"> 
    @Html.CheckBoxFor(model => model.checkboxId, new Dictionary<string, object> { { "disabled", "disabled" } })
</div>
<script type="text/javascript">
 $(document).ready(function() {
    $('#Username, #Password').change(function () {
        var username = $('input#Username').val();
        var password = $('input#Password').val();
        if (username.length != 0 && password.length != 0) {
            $('#checkboxId').attr('checked', true);
        }
        else {
            $('#checkboxId').removeAttr('checked');
        }
    });
</script>

在更改时影响复选框属性

要使用jQuery检查和取消复选框输入,使用$().prop("checked",true)$().prop("checked",false)。简单地移除checked属性不会取消选中复选框,但是prop()函数可以。

您正在删除该属性,因此它不能再设置为true。

应该使用prop()

$('#Username, #Password').change(function () {
        var username = $('input#Username').val();
        var password = $('input#Password').val();
        if (username.length != 0 && password.length != 0) {
            $('#checkboxId').prop('checked', true);
        }
        else {
            $('#checkboxId').prop('checked',false);
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="Username" placeholder="Username">
<input type="text" id="Password" placeholder="Password">
<input type="checkbox" id="checkboxId">