Question

我有一系列按钮，我想选择一个，但是当发生这种情况时，其他按钮会禁用。

我试图这样做，但它不起作用。它选择但在此之后禁用我拥有的每个按钮。请帮忙。

https://jsfiddle.net/KukApep3/cq45d3fq/#&togetherjs=Qg4mmTfbne

＆＃13;

    var supermercado;
    
    $("button").click(function(){
      $(this).toggleClass("selected");
      $("button").each(function(){
        if($(this).is(":selected")){
          supermercado = $(this).text();
        } else {
          $(this).prop("disabled", true);
        };
       });
     });

＆＃13;

    button {
      border:none;
      display:inline-block;
      outline:0;
      padding:8px 16px;
      color:#fff;
      background-color:#009688;
      text-align:center;
      cursor:pointer;
      white-space:nowrap;
      margin: 20px;
     }
     
     button:hover, .selected {
       color:#000;
       background-color:#bbb;
     }
     
    .selected {
       border: 2px solid black;
     }
     
     .inline-list {display: inline-flex;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
      <button>Jumbo</button>
      <button>Continente</button>
      <button>Lidl</button>
      <button>Pingo Doce</button>
    </div>

＆＃13;

Answer 1

尝试使用has class而不是.is(":selected")，因为该属性不适用于按钮

＆＃13;

 var supermercado;

  $("button").click(function(){
    $(this).toggleClass("selected");
    if($(this).hasClass("selected")){
      $("button").each(function(){
        if($(this).hasClass("selected")){
          supermercado = $(this).text();
        } else {
          $(this).prop("disabled", true);
        };
      });
     } else {
       $("button").prop("disabled", false);
     }
   });

＆＃13;

    button {
      border:none;
      display:inline-block;
      outline:0;
      padding:8px 16px;
      color:#fff;
      background-color:#009688;
      text-align:center;
      cursor:pointer;
      white-space:nowrap;
      margin: 20px;
     }
     
     button:hover, .selected {
       color:#000;
       background-color:#bbb;
     }
     
    .selected {
       border: 2px solid black;
     }
     
     .inline-list {display: inline-flex;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
      <button>Jumbo</button>
      <button>Continente</button>
      <button>Lidl</button>
      <button>Pingo Doce</button>
    </div>

＆＃13;

Answer 2

好吧，当你的代码被点击时，你的代码会循环遍历所有按钮，然后检查每个按钮是否selected（而不是应用了selected类），将永远不会发生按钮，因此每个按钮都会被禁用。并且，一旦禁用它们，就无法单击它们来重新启用它们。

我认为您只想删除.selected类。

而不是禁用按钮

您根本不需要循环，因为您可以从所有按钮中删除.selected类，仅将其应用于单击的按钮并获取单击按钮的文本 - 是选中的按钮。删除该循环，它可以工作。

var supermercado;
    
$("button").click(function(){
  // Remove the selected class from all buttons
  $("button").removeClass("selected");

  // Apply the selected class to just the clicked button
  $(this).toggleClass("selected");

  // Set the text to the text of the button that was just clicked
  supermercado = $(this).text();
});

button {
      border:none;
      display:inline-block;
      outline:0;
      padding:8px 16px;
      color:#fff;
      background-color:#009688;
      text-align:center;
      cursor:pointer;
      white-space:nowrap;
      margin: 20px;
     }
     
     button:hover, .selected {
       color:#000;
       background-color:#bbb;
     }
     
    .selected {
       border: 2px solid black;
     }
     
     .inline-list {display: inline-flex;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline-list">
      <button>Jumbo</button>
      <button>Continente</button>
      <button>Lidl</button>
      <button>Pingo Doce</button>
    </div>

选择其中一个时禁用按钮

2 个答案: