HTML input "disabled" attribute not working in Bootstrap modals

Question

I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.

When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.

The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.

This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.

I have run the entire page source through the W3 Validator for HTML5 and get no errors back.

Code for the input element:

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

I even tried to brute force disable it with jQuery on document ready; this does not work:

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

The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:

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

Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.

I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.

I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.

And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.

Any suggestions?

Answer 1

尝试使用disabled =“disabled”：

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

Answer 2

使用prop而不是attr

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

Answer 3

使用只读属性而不是禁用。