如何逆转以下表单元素禁用函数的过程

Question

我正在尝试实现以下表单函数的反面。这是在我希望它能运行的情况下使用的。我想默认情况下禁用表单元素，然后在按下"点击器"时启用。我正在尝试以下代码而没有成功。我对HTML没有问题，我的问题是让脚本按照我想要的方式运行。

样品html形式元素

<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>

这是我正在尝试的JavaScript：

$().ready(function() {
$('#clicker').click(function() {
    $('input').each(function() {
        if ($(this).attr('disabled')) {
            $(this).removeAttr('disabled');
        }
        else {
            $(this).attr({
                'disabled': 'disabled'
            });
        }
      });
   });
});

Answer 1

应使用prop()对于disabled而不是attr()。

您也可以使用prop(propertyName, fn)创建循环和隔离实例

$(function () {
    inputs_toggle_disable();//disable on page load, assumes none have disabled in markup
    $('button').click(inputs_toggle_disable);
});
function inputs_toggle_disable() {
    $('input').prop('disabled', function () {
        return !this.disabled
    });
}

demo

Answer 2

看起来您缺少HTML输入中的disabled属性，只需添加属性，如下所示：

<input type='text' disabled />
<input type='text' disabled />
<input type='text' disabled />

您的clicker按钮将删除此属性（请参阅JSFIDDLE）。

http://jsfiddle.net/xredrdur/