.prop（）和twitter引导模式对话框

Question

It is recommended to use .prop() instead of .attr() to set disabled property, but I found out that .prop() doesn't work in all cases.

For example in twitter bootstrap modal windows: http://twitter.github.com/bootstrap/javascript.html#modals

Press "Launch demo modal" button and in console run:

$('#myModal .btn').prop('disabled', true);

then the buttons won't be disabled. But if you run:

$('#myModal .btn').attr('disabled', true);

then they will be disabled successfully.

Any ideas why it happens?

Answer 1

This question highlights the confusion between .prop() and .attr(). The .attr() method works directly with the attributes on an HTML element while .prop() works with the JavaScript properties on the underlying JavaScript element.

For example, while $('#myInput').attr('disabled', true) and $('#myInput').prop('disabled', true) have the same affect, they are actually operating in two very different ways.

$('#myInput').attr('disabled', true) would be the equivalent of document.getElementById('myInput').setAttribute('disabled', 'disabled');

and $('#myInput').prop('disabled', true) would be the equivalent of document.getElementById('myInput').disabled = true;

While the latter example has the added affect of creating a "disabled" attribute on the element, that is a feature of the disabled property for inputs that is natively handled by the browser.

The problem with your example is that you're trying to operate on the anchor elements $('#myModal .btn') which have no native disabled property on their JavaScript objects. Therefore, setting .disabled = true is doing no more than setting .foo = 'bar' . The browser is not natively going to add an attribute for these elements.

I hope this makes sense. I will edit later if more clarification is needed.