Question

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

这是一个小提示，显示我现在所拥有的并且它有效但我必须在第一次点击#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()

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

1 个答案: