.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属性的一个特性。

您的示例的问题在于您尝试对其JavaScript对象上没有本机$('#myModal .btn')属性的锚元素disabled进行操作。因此，设置.disabled = true只不过是设置.foo = 'bar'。浏览器本身不会为这些元素添加属性。

我希望这是有道理的。如果需要进一步澄清，我会稍后编辑。