一次只允許單擊一個按鈕

Question

我正在創建一個具有不同按鈕選項的表單。 我希望只允許用戶選擇一個按鈕。 基本上，我在表單中有6個按鈕，當您單擊它時，按鈕的顏色變為綠色，並表示已選中。 現在，我可以選擇所有按鈕選項，如果要單擊另一個按鈕，則希望將其放到單擊某個按鈕的位置，然后我選擇的第一個按鈕將變為“未選中”

   <button type="button" class="button-school" value="hidden-springs">
              <h2>Hidden Springs</h2>
              <span class="select-active">SELECT</span>
   </button>

我只發布了一個按鈕，但它們都是相同的，只是值和h2值不同。 我試圖在網上找到可以幫助我的東西，但實際上我只看到單選按鈕的東西，這是我自己制作的。

這是我到目前為止的內容：

<script>
jQuery('.button-school').click(function() {
  jQuery(this).toggleClass('active');
  if (jQuery(this).hasClass('active')) {
    jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  } else {
    jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
  }
});

</script>

我看到有關“如果被單擊”的信息，我可以做一些只能有一個“活動”的事情嗎？

Answer 1

jQuery(function($) {
  $('.button-school').click(function() {
    $('.button-school').not(this).removeClass('active').html(function() {
      return $(this).html().replace('SELECTED', 'SELECT');
    });
    $(this).addClass('active').html(jQuery(this).html().replace('SELECT', 'SELECTED'));
  });
});

JSFiddle： https ://jsfiddle.net/TrueBlueAussie/v2ddpuw6/2/

筆記：

• jQuery(function(){})是DOM ready處理程序的快捷方式，該處理程序還將自身作為第一個參數傳遞。 這樣，您可以避免加載jQuery並安全地使用$ 。
• 如果將html()與函數一起使用，則返回值將用於替換現有的html 。
• 您可以使用not()從所有匹配項中排除當前選擇，以過濾除單擊按鈕之外的所有內容。

Answer 2

您可以同時使用按鈕和單選按鈕

HTML：

<input type="radio" hidden name="_groupname" value="what-gets-submitted" />
<button type="button" class="cstm-rad" onclick="this.previousElementSibling.checked=true;">Custom Radio Button</button>

CSS選擇按鈕的樣式，該樣式取決於按鈕前面是否帶有:checked項：
button.cstm-rad{ /*inactive style*/ }
:checked + button.cstm-rad{ /*active style*/ }

編輯說明：這幾乎與我最初提交的解決方案完全相同，只是清除了多余的文本，更多的CSS並給出了不可怕的命名約定。

Answer 3

我已經創建了一種非常粗略的實現方式，但是基本上您可以做到這一點，因此，當單擊一個提交按鈕時，它將隱藏所有提交按鈕，因此用戶無法再單擊它們。

jsFiddle： https ://jsfiddle.net/v2ddpuw6/

HTML

<input type="button" value="Submit1" class="Submit"/>
<input type="button" value="Submit2" class="Submit"/>
<input type="button" value="Submit3" class="Submit"/>
<input type="button" value="Submit4" class="Submit"/>
<input type="button" value="Submit5" class="Submit"/>

jQuery的

$(function()
{
    $('.Submit').on('click', function()
  {
    $('.Submit').hide();
  });
});

Answer 4

我已經檢查了您的代碼並得到了問題。 這是您正在尋找的工作示例。

請檢查這里的代碼。

 jQuery('.button-school').click(function() { if (!jQuery(this).hasClass('active')) { jQuery('.button-school').removeClass('active'); jQuery('.button-school').html(jQuery('.button-school').html().replace('SELECTED', 'SELECT')); jQuery(this).toggleClass('active'); jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED')); } else { jQuery(this).toggleClass('active'); jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT')); } }); 

 .active{ background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="button-school" value="hidden-springs"> <h2>Hidden Springs</h2> <span class="select-active">SELECT</span> </button> <button type="button" class="button-school" value="hidden-springs"> <h2>Hidden Springs</h2> <span class="select-active">SELECT</span> </button> <button type="button" class="button-school" value="hidden-springs"> <h2>Hidden Springs</h2> <span class="select-active">SELECT</span> </button> 

請享用 ！！！！！！！！！！！