Question

我有一个表格，其中包含几个像过滤器一样的字段。所有字段都具有相同的类，默认情况下为空。

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

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

我的字段看起来像这样：

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

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

Answer 1

尝试

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

演示：Fiddle

Answer 2

试试这个，

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

DEMO

Answer 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);

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

3 个答案:

DEMO

Demo