javascript - 在 jQuery 中同时切换禁用属性和显示/隐藏

Question

我正在尝试在需要显示和隐藏某些内容并禁用不在 View 中的输入的多部分表单上使用 jQuery.Validate。基本上，如果用户单击按钮来切换附加输入，它就会显示，以便他们可以输入数据。但直到它显示我需要保持禁用状态，以便 jquery.validate 将忽略它。到目前为止，我找到了一个简单的脚本来切换禁用属性，我可以根据需要显示/隐藏输入，但我需要它们一起工作。是否有一种简单的方法可以在切换属性的同时显示/隐藏输入？

这是一个 fiddle ，它显示了我现在拥有的东西并且它可以工作，但我必须在第一次点击 #toggleDisabled 按钮两次:

JS Fiddle

这是我使用的函数逻辑:

 (function($) {
  $.fn.toggleDisabled = function() {
    return this.each(function() {
        var $this = $(this);
        if ($this.attr('disabled')) $this.removeAttr('disabled').show();
        else $this.attr('disabled', 'disabled').hide();
    });
 };
})(jQuery);

 $(function() {
 $('#toggleButton').click(function() {
    $('#toggleInput').toggleDisabled();
  });
 });

这是简单的 HTML:

<form id="myform">  
 <input type="text" name="field1" />  <br/>  
<br />     <input type="text" id="toggleInput" name="toggleInputName" style="display:none" />
 <input type="button" id="toggleButton" value="Toggle Disabled" />
 <input type="submit" />
 </form> 

Answer 1

使用.prop()而不是 .attr()

$.fn.toggleDisabled = function () {
    return this.each(function () {
        var $this = $(this);
        if ($this.prop('disabled')) {
            $this.prop('disabled', false).show();
        } else {
            $this.prop('disabled', true).hide();
        }
    });
};

DEMO , 你可以试试更短的形式 here

也通过.prop() vs .attr()