How to disable all buttons after one is clicked using Jquery

lullmable
October 20, 2023
148 views
2 votes
3 Answers

Im very new to javascript/jquery and need help disabling all my answer buttons after one is clicked. Im making a mini trivia game for a project. How would I disable all the other buttons after one is clicked? And I want the background to turn red for the incorrect buttons and green for the correct answer. Also how would I set the text to correct or incorrect based on the right or wrong answer? all my JS code has to be written in Jquery. Any help would be great

This is my HTML code

<div class="container">

    <section id="q1" class="question1">
        <h2 class="question-text">What does CSS stand for?</h2>
        <div class="answer-btns">
            <button id="q1-btn" class="btn">Computer Style Sheets</button>

            <button id="q1-btn" class="btn">Colorful Style Sheets</button>

            <button id="q1-btn" class="btn-valid">Cascading Style Sheets</button>

            <button id="q1-btn" class="btn">Creative Style Sheets</button>

        </div>

    </section>

This is my code in JS jquery so far. I wanted the box to turn red for the incorrect answers but not sure how to disable all other buttons after one is selected.

 $('.btn').on('click', function() {
  $(this).css('background-color', 'red')
 })

Answers

You should disable all the buttons and then programmatically enable the one that was clicked.

// Set up an event handler on the parent of all the buttons.
// The click event will "bubble" up to that parent.
document.querySelector("#q1 .answer-btns").addEventListener("click", function(event){
  // Loop over all the buttons
  this.querySelectorAll("button").forEach(function(btn){
    btn.disabled = true;
  });
  
  // Now, enable just the one that was selected
  // The event handler is automatically passed a reference
  // to the event that triggered it and you can look at the 
  // "target" of the event to know which element was the trigger
  event.target.disabled = false;
});

<section id="q1" class="question1">
  <h2 class="question-text">What does CSS stand for?</h2>
  <div class="answer-btns">
    <button id="q1-btn" class="btn">Computer Style Sheets</button>
    <button id="q1-btn" class="btn">Colorful Style Sheets</button>
    <button id="q1-btn" class="btn-valid">Cascading Style Sheets</button>
    <button id="q1-btn" class="btn">Creative Style Sheets</button>
 </div>
</section>

Having said that. This is not a good user interface. What if a user clicks the wrong button by mistake? Instead, you should use hidden radio buttons, with each having a related label that is visible and styled to look like a button. Then, the user can select only one from the group, but can still change their mind if they want to:

document.getElementById("getChecked").addEventListener("click", function(){
   // Get the one radio button (within its group) that is checked:
   var checkedRadio = document.querySelector("input[type='radio'][name='rad']:checked");
   
   // Clear old output and log new results
   console.clear();
   console.log(checkedRadio.value);
});

/* Hide the checkboxes */
input[type='radio'] { display:none; }

/* Default styling for labels to make them look like buttons */
input[type='radio'] + label {
  display:inline-block;
  box-shadow:1px 1px grey;
  background-color:#e0e0e0;
  padding:5px;
  border-radius:3px;
  font-family:Arial, Helvetica, sans-serif;
  cursor:pointer;
}

/* Styling for labels when corresponding radio button is checked */
input[type='radio']:checked + label {
  box-shadow:-1px -1px grey;
  background-color:#f78d32;
}

<input type="radio" id="rad1" name="rad" value="choice 1">
<label for="rad1">Choice 1</label>

<input type="radio" id="rad2" name="rad" value="choice 2">
<label for="rad2">Choice 2</label>

<input type="radio" id="rad3" name="rad" value="choice 3">
<label for="rad3">Choice 3</label>

<p><button id="getChecked">Get the checked radio button value</button></p>

Consider the following.

$(function() {
  $('.btn').on('click', function() {
    $(this).parent().find(".btn").css("background-color", "red").prop('disabled', true);
    $(".btn.valid").css("background-color", "green");
  });
});

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="container">
  <section id="q1" class="question1">
    <h2 class="question-text">What does CSS stand for?</h2>
    <div class="answer-btns">
      <button id="q1-btn" class="btn">Computer Style Sheets</button>
      <button id="q2-btn" class="btn">Colorful Style Sheets</button>
      <button id="q3-btn" class="btn valid">Cascading Style Sheets</button>
      <button id="q4-btn" class="btn">Creative Style Sheets</button>
    </div>
  </section>
</div>

Please note the changes to ID and Classes.

You can see here that we can select all the button by referencing the Parent element, .parent() and then finding all the buttons with .find(). This is used to select the target and the other buttons. Then, .prop() and .css() is used to adjust the Property of the buttons selected and the background.

For all button, you can use

$('button').prop('disabled', true);

$('.btn').on('click', function() {
  $(this).css('background-color', 'red')
  $('button').prop('disabled', true);
})

but if you want to disable button based on class so you can do like this

 <div class="answer-btns">
   <button id="q1-btn" class="btn">Computer Style Sheets</button>

   <button id="q1-btn" class="btn">Colorful Style Sheets</button>

   <button id="q1-btn" class="btn valid">Cascading Style Sheets</button>

   <button id="q1-btn" class="btn">Creative Style Sheets</button>
 </div>

$('.btn').on('click', function() {
  $(this).css('background-color', 'red')
  $('.btn').prop('disabled', true);
})

Please signup or login to give your own answer.

Click here to cancel reply.