.prop() и Twitter Bootstrap модальных диалогов

Question

Рекомендуются использовать .prop() вместо .attr() установить disabled собственности, но я обнаружил, что .prop() не работает во всех случаях.

Например, в Twitter Bootstrap модальных окон: кнопка http://twitter.github.com/bootstrap/javascript.html#modals

Нажмите «Запуск демо-модальный» и в консоли запуска:

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

тогда не будут отключены кнопки. Но если вы запустите:

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

тогда они будут успешно отключены.

Любые идеи, почему это происходит?

Answer 1

Этот вопрос освещает путаницу между .prop() и .attr(). Метод .attr() работает непосредственно с атрибутами в элементе HTML, а .prop() работает со свойствами JavaScript в базовом элементе JavaScript.

Например, в то время как $('#myInput').attr('disabled', true) и $('#myInput').prop('disabled', true) имеют одинаковый аффект, они фактически функционируют двумя разными способами.

$('#myInput').attr('disabled', true) бы эквивалент document.getElementById('myInput').setAttribute('disabled', 'disabled');

и $('#myInput').prop('disabled', true) бы эквивалент document.getElementById('myInput').disabled = true;

Хотя последний пример имеет дополнительное аффект создания «заблокировано» атрибут элемента, то есть функция свойства disabled для входов, которые изначально обрабатываются браузером.

Проблема с вашим примером заключается в том, что вы пытаетесь работать с элементами привязки $('#myModal .btn'), которые не имеют собственного свойства disabled на своих объектах JavaScript. Поэтому установка .disabled = true делает не более .foo = 'bar'. Браузер не собирается добавлять атрибут для этих элементов.

Надеюсь, это имеет смысл. Я буду редактировать позже, если потребуется дополнительное разъяснение.