ボタンのいずれかが選択されている場合は無効にする

Question

ボタンをクリックして選択したいが、その場合は他のボタンは無効になる。

私はそれをしようとしていますが、動作していません。それは選択するが、その後、私は持っているすべてのボタンを無効にします。助けてください。

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

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

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>

Answer 1

あなたのコードは現在、すべてのボタンをクリックしたときにループして、それぞれがselected（それにはselectedクラスが適用されています）があるかどうかを確認します。 1つは無効になります。また、無効にされると、クリックして再度有効にすることはできません。

ボタンを無効にするのではなく、.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>

Answer 2

使用してみてください起因することが

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); 
 
    } 
 
    });

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>

ボタンには適用されませんように、クラスではなく、 .is(":selected")を持っています