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

Question

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

这是一个小提示，显示我现在拥有的东西，它可以工作，但我必须在第一次两次单击#toggleDisabled按钮：

JS小提琴

这是我正在使用的函数逻辑：

 (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 ，您可以在这里尝试更短的形式

也可以通过.prop（）vs .attr（）