javascript - .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', '禁用');

和$('#myInput').prop('disabled', true) 等价于document.getElementById('myInput').disabled = true;

虽然后一个示例具有在元素上创建“禁用”属性的额外影响，但这是浏览器 native 处理的输入的 disabled 属性的一个功能。

你的例子的问题是你试图对 anchor 元素 $('#myModal .btn') 进行操作，它没有原生的 disabled 属性他们的 JavaScript 对象。因此，设置 .disabled = true 只不过是设置 .foo = 'bar'。浏览器本身不会为这些元素添加属性。

我希望这是有道理的。如果需要更多说明，我稍后会进行编辑。