Allow only one button to be clicked at a time

Question

I'm creating a form with different button options. I want the user to only be allowed to select one button. Basically I have 6 of these buttons inside of the form and when you click it the button color changes to green and says selected. Right now I can select all of the button options, I want it to where when I click one of the buttons if I click another one, then the first one I selected gets "unchecked"

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

I only posted one of the buttons but they are all the same with different values and h2 values. I was trying to find something online to help me but I was really only seeing things for radio buttons, this one is one that I made myself.

Here is what I have so far:

<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>

I see stuff about "if clicked" can I do something where I can only have one "active"?

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/

Notes:

• jQuery(function(){}) is a shortcut for a DOM ready handler, which also passed itself as the first parameter. This way you can avoid loads of jQuery and use $ safely.
• If you use html() with a function, the return value is used to replace the existing html .
• You can exclude the current selection from all matches with not() to filter all except the clicked button.

Answer 2

You could always use both buttons and radio buttons

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 selecting, style the button based on whether or not it's preceded by a :checked item:
button.cstm-rad{ /*inactive style*/ }
:checked + button.cstm-rad{ /*active style*/ }

EDIT NOTE: This is almost exactly the same solution I submitted originally, just cleaned of superfluous text, more CSS, and given non-terrible naming conventions.

Answer 3

I have created a really crude way of implementing this, but basically you have it so when one of the submit buttons are clicked it will then hide all of the submit buttons so the user can no longer click on them.

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

i have check your code and got the issue. Here is the working example what you are looking for.

Please check here is the code.

 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> 

Enjoy !!!!!!!!!!!