Question

我在一个名为1,2,3,4和5的html页面5按钮中。如果单击3按钮，则必须禁用其他按钮。

var clicking=0;
$(document).ready(function(){
 $('button').click(function(){
 clicking++;
 $(this).toggleClass("active");
  if(clicking==3){
   $('button').click(function(){
   $(this).toggleClass("nothing");
   })
  }
 })
})

我尝试使用此脚本但它不起作用，因为可以单击所有按钮。如果被忽略。我希望只能点击这5个按钮中的3个而另一个必须被禁用。

Answer 1

你应该这样做：

var clicking=0;
$(document).ready(function(){
  $('button').click(function(){
    clicking++;
    $(this).toggleClass("active");
    if(clicking==3){
      $('button').each(function(){
        if(!$(this).hasClass("active")){
          $(this).addClass("inactive");
        }
      });
    }
  });
});

我没有尝试过，但我认为你喜欢类似的东西。

Answer 2

好吧我不是jquery的大师，但是我想出了一个简单的逻辑来实现你想要实现的目标，即禁用所有其他按钮，这些按钮在三次点击后都没有被点击过。这是我的工作代码：

var count = 0;
var ids = new Array();
$(document).ready(function(){
 $('button').click(function(){
     ids[count] = this.id;
     count++;    
     if(count == 3){  //three buttons clicked, now time to disable the remaining buttons
         for(var i=0; i<$('button').length; i++){ //we'll check for all buttons
             var id = $('button')[i].id; 
             var flag = true;
             for(var j=0; j<ids.length; j++){ //checking all the buttons against the buttons that got clicked
                 if(id == ids[j])
                     flag = false; //button has been clicked (won't be disabled)              
             }
             if(flag){
                 $("#"+id).attr("disabled", true); //disabling button
             }
         }
     }
 })
})

这是非常自我解释的，我添加了很多评论，但我仍然做的是：

保存点击的按钮ID，然后在三次点击后，禁用所有与所保存的ID不匹配的按钮。非常简单..但我确信你可以使代码更好，因为我不太擅长jquery。

<强> See the Working DEMO here

Answer 3

编辑：缩短了代码

我认为这就是你想要的？使用.active计算按钮数。如果是三个或更多，请停用所有不具有.active的按钮。

JS：

$('button').on('click', function() {
    $(this).toggleClass('active');
    $('button').prop('disabled',false);
    if ($('.active').length >= 3) {
        $('button:not(.active)').prop('disabled',true);
    }
});

这里是fiddle。

Answer 4

我的消化是使用数组，因此你知道点击了女巫按钮。

$(document).ready(function(){
    var clickedbuttons = [];
     $('button').click(function(){
         $(this).toggleClass("active");
         var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
         if(idx == -1)
             clickedbuttons.push($(this).attr("id"));
         else clickedbuttons.splice(idx,1);
         if(clickedbuttons.length == 3) {
                 $('button').each(function() {
                     var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
                     if(index == -1)
                         $(this).attr("disabled", "disabled");
                 });
             }
             else {
                 $('button').each(function() {
                     $(this).removeAttr("disabled");
                 });
            }
     });
})

我假设每个按钮都有一个id。这将按你的意愿工作，但你必须在每个按钮中都有一个id。

如果您不想相应地重新启用更改

$(document).ready(function(){
    var clickedbuttons = [];
     $('button').click(function() {
         var idx = jQuery.inArray($(this).attr("id"), clickedbuttons );
         if(idx == -1) {
             clickedbuttons.push($(this).attr("id"));
             $(this).toggleClass("active");
         }
         if(clickedbuttons.length == 3) {
                 $('button').each(function() {
                     var index = jQuery.inArray($(this).attr("id"), clickedbuttons );
                     if(index == -1)
                         $(this).attr("disabled", "disabled");
                 });
             }
             else {
                 $('button').each(function() {
                     $(this).removeAttr("disabled");
                 });
            }
     });
})

如果单击3按钮并禁用其他按钮则发生

4 个答案: