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 example

Answer 2

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

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

Answer 3

将Jquery点击事件绑定到按钮类，然后使用Jquery方法（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 ;
    } 
});


});

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

4 个答案: