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')
})
3
Answers
You should disable all the buttons and then programmatically enable the one that was clicked.
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:Consider the following.
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
but if you want to disable button based on class so you can do like this