jQuery 为真时禁用选项

Question

您好，我正在尝试创建一个简单的测验。我是 jQuery 的新手，如果看起来很蠢，请见谅。

但它不起作用。如果用户选择 q1b...正确答案...jQuery 将禁用剩余的单选按钮。

html形式：

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

和 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"); 

       }
     });

 });

Answer 1

您可以试试这个：为 .answer 单选按钮注册单击事件处理程序，并在其中使用 .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);
 });
});

Answer 2

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    $(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>

jQuery 为真时禁用选项

jQuery disable option when true

javascript

jquery

radio-button