更改TextBoxFor只读属性，以确定复选框是否被选中

本文关键字：是否 复选框 TextBoxFor 只读属性 更改 | 更新日期: 2023-09-27 18:16:52

我试图改变TextBoxFor只读属性是否选中复选框。我读过其他帖子，但答案似乎不适合我…如果有谁能指出我在下面的代码中遗漏了什么。

<div class="editor-label">
                @Html.LabelFor(m => m.AddFitbit)
            </div>
            <div class="editor-field" id="checkBox">
                @Html.CheckBoxFor(m => m.AddFitbit)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.Mail)
            </div>
            <div class="editor-field" id="userMail">
                @Html.TextBoxFor(m => m.Mail)
            </div>
            <br />
            <input class="submit" type="submit" value="@LangResources.Create" />
            <button onclick="history.back(); return false;">@LangResources.BtnCancel</button>
        </div>
    </article>
}
@Html.ValidationSummary(true, LangResources.ScreenAddGeneralError)
<script type="text/javascript">
    $(function() {
        $('#checkBox').change(function () {
            if ($(this).is(':checked')) {
                $('#userMail').attr('readonly');
            } else {
                $('#userMail').removeAttr('readonly');
            }
        });
    });
</script>

更改TextBoxFor只读属性，以确定复选框是否被选中

您的目标是包含复选框的div，它确实不会触发任何change事件。像这样瞄准div内部的复选框。

$(function() {
    $('#checkBox input[type="checkbox"]').change(function () {
        $('#userMail input[type="text"]').prop('readonly', $(this).is(':checked'));
    });
});

另外，我更正并简化了你的代码，用prop代替attr。属性应该表示给定属性的初始值，因此更改相应的元素属性是更好的做法。

关于使用prop的详细信息，请参阅文档(基于@Liam的评论)

相关文章：