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.

score 2 · Accepted Answer · answered Nov 24 '13 at 15:20

2

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

answered Nov 24 '13 at 15:20

Arun P Johny

384,651
66
527
531

score 1 · Answer 2 · answered Nov 24 '13 at 15:20

1

try this,

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

DEMO

answered Nov 24 '13 at 15:20

Rajaprabhu Aravindasamy

66,513
17
101
130

Thanks, this is great too - Arun's solution just seems to work better in my case. – user2571510 Nov 24 '13 at 15:31
@user2571510 Arun always better. :) – Rajaprabhu Aravindasamy Nov 24 '13 at 15:32

score 0 · Answer 3 · answered Nov 24 '13 at 15:35

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

jQuery: disable class except current element

3 Answers3

DEMO

Demo