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.

Arun P Johny · Accepted Answer · 2013-11-24 15:20:40Z

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, 2013 at 15:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-24 15:20:55Z

1

try this,

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

DEMO

answered Nov 24, 2013 at 15:20

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

2 Comments

user2571510 Over a year ago

Thanks, this is great too - Arun's solution just seems to work better in my case.

Rajaprabhu Aravindasamy Over a year ago

@user2571510 Arun always better. :)

Gal Samuel · Accepted Answer · 2013-11-24 15:35:02Z

0

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

answered Nov 24, 2013 at 15:35

Gal Samuel

4932 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery: disable class except current element

3 Answers 3

Comments

DEMO

2 Comments

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related