Avoid triggering multiple click events

Question

I'm trying to make an input field disabled/enabled when I click on its sibling link.

Here is my code.

$('a').on('click',function(){
    var inp=$(this).siblings('input');
    inp.prop('disabled', false);
    $(this).click(function(){
        inp.prop('disabled', true);
    });
});

When I click first time it works fine, But from next time it won't work. Because the both click functions, triggers. I'm unable to overcome this issue. Please help me.

See the fiddle.

possible duplicate of [toggle disabled attribute in jquery](http://stackoverflow.com/questions/11903293/toggle-disabled-attribute-in-jquery) — mortb, Nov 19 '14 at 10:19

Abhitalks · Accepted Answer · 2014-11-19T10:25:42.977

Just negate the disabled prop on every click. elem.disabled = ! elem.disabled.

Demo Fiddle: http://jsfiddle.net/abhitalks/2a2ajbnb/1/

Snippet:

$('a').on('click',function(){
    var $inp = $(this).siblings('input');
    $inp.prop('disabled', !$inp.prop('disabled'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="x" value="22" disabled/><a href="#">change</a>

score 2 · Answer 2 · answered Nov 19 '14 at 10:22

2

Try this:

$('a').on('click',function(){
    var inp=$(this).siblings('input');
    inp.prop('disabled', !inp.prop('disabled'));

});

answered Nov 19 '14 at 10:22

euvl

4,716
2
25
30

score 1 · Answer 3 · answered Nov 19 '14 at 10:18

1

You could try making it so one click function does both jobs, that's probably easier. Otherwise, just turn off the previous click function using

$('a').off('click');

answered Nov 19 '14 at 10:18

Evan Knowles

7,426
2
37
71

score 1 · Answer 4 · answered Nov 19 '14 at 10:19

$('a').on('click', function() {

  if ($('#ib').attr('disabled') == 'disabled') {
    $('#ib').prop('disabled', false);
  } else {
    $('#ib').prop('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id='ib' type="text" name="x" value="22" disabled/>
<a href="#">change</a>

DEMO

Avoid triggering multiple click events

4 Answers4