Question

我的网页上有＆＃34;编辑＆＃34;使用Bootstrap在模式对话框中显示的表单。

当表单出现时，我希望首先禁用其中一个输入字段，并在用户单击复选框时启用。

问题是，我的浏览器（Chrome）没有反映模态对话框中任何表单元素的disabled属性。模态之外的任何表单元素都可以正常工作。

这也适用于我拥有完全相同逻辑的另一个网页。 这个页面只是行为不端。

我已经通过W5 Validator for HTML5运行整个页面源，并且没有任何错误。

输入元素的代码：

<form role="form" id="frmEdit" action="group_edit.php" method="post">
    <!-- ... -->
    <input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
    <!-- ... -->
</form>

我甚至尝试使用jQuery在文档就绪时禁用它;这不起作用：

$(document).ready(function() {
    $("#txtEditAlternate").attr("disabled", true);
    // ...
});

在禁用文本字段时唯一可行的方法是选中复选框然后取消选中该项：

$("#chkbox").click(function() {
    $("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});

虽然这种方法失败了，但由于文本字段应该被禁用，直到选中复选框。

我已经读过，简单地包含disabled没有价值的是有效的HTML5（验证器甚至没有对此发出警告），并且它可以在其他地方使用。

我已经尝试了所有我能想到的东西，并且只能推测它与Bootstrap模态功能有关。但就像我说的那样，同样的逻辑在我拥有的另一个网页上完美运作。

是的，我知道Chrome喜欢缓存内容。我有＆＃34;辛苦刷新＆＃34;很多次，不会改变任何东西。

有什么建议吗？

Answer 1

尝试使用disabled =＆＃34;禁用＆＃34;：

<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />

Answer 2

使用prop而不是attr

 $("#txtEditAlternate").prop("disabled", true);

HTML输入＆＃34;禁用＆＃34;属性在Bootstrap模态中不起作用

2 个答案: