jquery - jQuery: disable class except current element

Question

I have a table with several fields that act like filters. All fields have the same class and are empty by default.

Is there a way that I can only allow one of these fields at a time to be active and disable all others at the same time ? What I want to achieve is that you can only fill in one field at a time, i.e. if you fill in one field then the others get disabled and when you empty this field again the others get reactivated.

My thought was to add a temporary class while entering data but I couldn't get this to work.

My fields all look like this:

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

Many thanks for any help with this, Tim.

Answer 1

尝试

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

演示：小提琴

Answer 2

尝试这个，

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

演示

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

演示