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

Try

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

Demo: Fiddle

Answer 2

try this,

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

DEMO

Answer 3

you may use jQuery .each() in a way that will suit your needs:

for 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" />

tweak the function for your needs:

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

and call it via some trigger (i.e onclick or onchange):

disableAllButX(1);

Demo