避免触发多次点击事件

Question

单击同级链接时，我试图禁用/启用输入字段。

这是我的代码。

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

当我第一次单击时，它可以正常工作，但是从下一次起，它将无法工作。 因为这两种单击功能都会触发。 我无法克服这个问题。 请帮我。

看到小提琴。

Answer 1

只需在每次点击时取消disabled道具即可。 elem.disabled = ! elem.disabled elem.disabled = ! elem.disabled 。

演示提琴： http : //jsfiddle.net/abhitalks/2a2ajbnb/1/

片段：

 $('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> 

Answer 2

尝试这个：

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

});

Answer 3

您可以尝试这样做，这样一键式功能就可以完成两项工作，这可能会更容易。 否则，只需使用以下命令关闭上一个点击功能

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

Answer 4

 $('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> 

演示