CODEWITHSUNDEEP
javascriptjqueryradio-button
Superunknown
Superunknown

Reputation: 501

jQuery disable option when true

Hi I'm trying to create a simple quiz. I'm new to jQuery so apologies if it looks daft.

But it's not working. If the user selects q1b...the correct answer...jQuery will disable the remaining radio buttons.

html form:

           <div class="quiz">
                     <ul class="no-bullet" id="question1">
                        <li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
                        <li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
                        <li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
                    </ul>
                </div>

and the jQuery:

$(document).ready(function(){

//If user selects q1b  which is the correct answer...
//all other radio buttons will be disabled

$('#question1').click(function() {
   if($('#q1b').is(':checked'))

       { 
       //disables radio button q1a and radio button q1c
          $("input[type='radio' id="q1a" && "q1c").removeAttr("disabled"); 

       }
     });

 });

Upvotes: 0

Views: 76

Answers (2)

Vijay
Vijay

Reputation: 431





    $(document).ready(function(){
    $('li.answer input[type="radio"]').click(function() {
     $(this).closest('ul').find('input[type="radio"]').not(this).attr('disabled',true);
     });
    });


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div class="quiz">
                         <ul class="no-bullet" id="question1">
                            <li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
                            <li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
                            <li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
                        </ul>
                    </div>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can try this : register click event handler for .answer radio button and inside it disable all other sibling radio button using .prop()

$(document).ready(function(){

  //If user selects q1b  which is the correct answer...
  //all other radio buttons will be disabled

  $('li.answer input[type="radio"]').click(function() {
     //disable all other radio button

 $(this).closest('ul').find('input[type="radio"]').not(this).prop('disabled',true);
 });
});

Upvotes: 2

Related Questions