javascript - HTML input "disabled" attribute not working in Bootstrap modals - Stack Overflow

admin管理员组

文章数量:1277360

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 es 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?

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 es 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?

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow asked Jun 11, 2017 at 7:25 David MordigalDavid Mordigal 88322 gold badges1010 silver badges2424 bronze badges 7

• Your code works on my Chrome and my Firefox. It means the problem must be somewhere else. The good news is that same code work on other pages. So why not recreate that page using the others. Just lift that form and dump in the new one. – hans-könig Commented Jun 11, 2017 at 7:43
• Do you have a link to the webpage? Do you have a doctype declaration? – Govind Rai Commented Jun 11, 2017 at 7:43
• @GovindRai no, this is hosted locally on my puter. Using MAMP for Mac. Tried restarting the server and Chrome, still not working. – David Mordigal Commented Jun 11, 2017 at 7:46
• @hans I suppose I'll have to try that. I have no idea what's causing it but sometimes starting fresh seems to fix some problems. – David Mordigal Commented Jun 11, 2017 at 7:48
• Update: I've rewritten the modal part, and it works now. I have no idea what was wrong last time (invisible or missing character, maybe?) but regardless I'm glad it's fixed now. – David Mordigal Commented Jun 11, 2017 at 7:52

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

try to use disabled="disabled":

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

Use readonly attribute instead of disabled.

use prop instead of attr

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

本文标签： javascriptHTML input quotdisabledquot attribute not working in Bootstrap modalsStack Overflow