Injected HTML attribute "disabled" does not work in Bootstrap mods

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

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

The problem is my browser (Chrome) is not reflecting the attribute disabled

for any form element in the modal dialog. Any form element outside the modal works fine.

This also works great on another web page that has the same logic. It is wrong on this page.

I ran the entire page source through the W3 Validator for HTML5 and got no errors.

Code for 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 overdo it, disable it with jQuery on the finished document; this does not work:

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

      

        
        
        
      

    

The only thing that works when it comes to disabling a textbox is when the checkbox is checked and then unchecked:

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

      

        
        
        
      

    

Although this kind of hitting the target, since the text box should be disabled until the checkbox is checked.

I read that just including disabled

with no value is valid HTML5 (the validator didn't even warn about it) and it works elsewhere.

I've tried everything I can think of and I can only assume it has something to do with Bootstrap's modal functionality. But as I said, the same logic works fine on another web page I have.

And yes, I know Chrome likes to cache things. I am "heavily updated" many times without changing anything.

Any suggestions?