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.
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>Try this:
$('a').on('click',function(){
var inp=$(this).siblings('input');
inp.prop('disabled', !inp.prop('disabled'));
});
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');
$('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>