jQuery：禁用除当前元素之外的类答案

【问题标题】：jQuery: disable class except current elementjQuery：禁用除当前元素之外的类
【发布时间】：2013-12-09 04:21:10
【问题描述】：

我有一个表，其中有几个字段，它们的作用类似于过滤器。所有字段都具有相同的类，默认情况下为空。

有没有一种方法可以让我一次只允许其中一个字段处于活动状态并同时禁用所有其他字段？我想要实现的是您一次只能填写一个字段，即如果您填写一个字段，则其他字段将被禁用，当您再次清空该字段时，其他字段将重新激活。

我的想法是在输入数据时添加一个临时类，但我无法让它工作。

我的字段都是这样的：

<input type="text" class="inputFilter" id="input1" name="input1" value="" />

非常感谢您提供的任何帮助，蒂姆。

【问题讨论】：

标签： jquery disabled-input input-field

【解决方案1】：

试试

jQuery(function(){
    var $inputs = $('.inputFilter').on('input blur', function () {
        var value = $.trim(this.value);
        $inputs.not(this).prop('disabled', value.length != 0);
    })
})

演示：Fiddle

【讨论】：

【解决方案2】：

试试这个，

$('.inputFilter').change(function(){      
       if($(this).val() == "")
       {
            $('.inputFilter').removeProp('disabled');
       }
      else
       {
            $('.inputFilter').not($(this)).prop('disabled',true); 
       }
});

DEMO

【讨论】：

谢谢，这也很棒 - Arun 的解决方案似乎对我来说效果更好。
@user2571510 Arun 总是更好。 :)

【解决方案3】：

您可以以适合您需要的方式使用 jQuery .each()：

对于 HTML：

 <input type="text" class="inputFilter" id="input1" name="input1" value="A" />
 <input type="text" class="inputFilter" id="input2" name="input2" value="B" />
 <input type="text" class="inputFilter" id="input3" name="input3" value="C" />

根据您的需要调整功能：

function disableAllButX(x){
    $.each( $('input[type=text]') , function( i, element ){
        if(i!=x){
          element.disabled=true;
        } else {
          element.disabled=false;
        }
    });
}

并通过一些触发器（即 onclick 或 onchange）调用它：

disableAllButX(1);

Demo

【讨论】：