Question

在这里，我想为onClick事件定位多个元素，同时禁用除已点击的按钮之外的所有按钮。

到目前为止，我有这个：

 $("#elementone", "elementtwo, #elementthree").on('click', function(){
              if($(this).is(':checked')){
       $('#elementone, #elementtwo, #elementthree').attr('disabled', true);
   }
});

下面的代码是我想要的，但是我希望有更优雅的方法来实现这一目标？

$("#elementone").on('click', function(){
              if($(this).is(':checked')){
       $('#elementtwo, #elementthree').attr('disabled', true);
   }
}); 

$("elementtwo").on('click', function(){
              if($(this).is(':checked')){
       $('#elementone, #elementthree').attr('disabled', true);
   }
}); 

$("#elementthree").on('click', function(){
              if($(this).is(':checked')){
       $('#elementone, #elementtwo').attr('disabled', true);
   }
});

Answer 1

使用class代替id也就是说，放置一个名为＆＃34; class＆＃34;的类。（或任何其他有效的类名）在三个按钮上。然后你可以使用：

var $elements = $('.element');
$elements.click(function() {
    if ($(this).is(':checked')) {
       $elements.not(this).prop('disabled', true);
   }
});

注意：

对.not(this)的调用会从集合中删除当前点击的按钮。
您还应该使用.prop()代替.attr()来禁用按钮。
如果这些是<input type="checkbox">元素，最好使用change事件，而不是click事件。

Answer 2

$("#elementone,#elementtwo,#elementthree").on('click', function(){
    var clickedId = $(this).attr("id"),
        selectors = {
            elementone: "#elementtwo,#elementthree",
            elementtwo: "#elementone,#elementthree",
            elementthree: "#elementone,#elementtwo"
        },
        selector = selectors[clickedId];

    if($(this).is(':checked')){
        $(selector).attr('disabled', true);
    }
});

如何在使用运算符进行onclick事件时定位多个元素

2 个答案: