javascript - 使用 Jquery 或 Javascript 禁用按钮单击其他按钮时

Question

我有这两个按钮，我希望在单击另一个按钮时禁用其中一个按钮。

有html

    <button type="submit" id="button_user" name="submit" class="btn btn-small btn-primary" data-toggle="collapse" data-target="#fsearch">Pretraga terena na sajtu</button>
  <button type="submit" id="button_field" name="submit" class="btn btn-small btn-primary" data-toggle="collapse" data-target="#usearch">Pretraga korisnika na sajtu</button>

我已经设法用两个函数和 onclick 做到了这一点，但我想知道有没有什么优雅的方法可以在一个函数中做到这一点，从而可以避免内联 js？

这是我的js：

$(document).ready(function(){


disable_one = function(){
    if($('button_user').data('clicked', true)){
        $('#button_field').attr("disabled", "disabled");
        return;
    }
};
disable_two = function(){
    if($('button_field').data('clicked', true)){
        $('#button_user').attr("disabled", "disabled");
        return;
    }
};


});

Answer 1

使用 jQuery：

$('.btn.btn-small.btn-primary').click(function () {
    $('.btn.btn-small.btn-primary').not($(this)).prop('disabled', true)
});

jsFiddle 示例

Answer 2

$('#button_user').on('click', function() {
    $('#button_field').attr('disabled', 'disabled');
});

工作示例：http: //jsfiddle.net/BPZT7/

Answer 3

将 Jquery 单击事件绑定到按钮类，然后使用 Jquery is 方法 ( http://api.jquery.com/is/ ) 使用目标属性。

 $("your button class").click(function(e) {
    if($(e.target).is("#button_user")) {
        //Disable button_field
    } else {
        // Disable button_user
    }
})

Answer 4

这就是我设法做到这一点的方法，非常简单明了。现在，如果访问者改变主意，则启用此按钮，以便他可以再次选择。

    $(document).ready(function(){

$('#button_user').click(function () {
    if (button_field.disabled==false){
        button_field.disabled = true;
    }
    else {
    button_field.disabled = false ;
    } 
});
$('#button_field').click(function () {
    if (button_user.disabled==false){
        button_user.disabled = true;
    }
    else {
    button_user.disabled = false ;
    } 
});


});