一次只允许单击一个按钮

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> 

请享用 ！！！！！！！！！！！