JQueryで選択したラジオボタンを変更する

Question

私はMVCプロジェクトを持っています。特定のページには、ユーザーがテスト用の質問を作成できるフォームがあります。質問テキストのためのtextareaフィールドと、回答のための4つのtextareaフィールドと、 "すべての上"と "上のなし"のチェックボックスがあります。また、どの回答が正しいかをユーザが選択できるようにする潜在的な回答ごとのラジオボタンもあります。ユーザーが「すべてのもの」をオプションとして追加することを選択した場合、「なし」のチェックボックスとラジオボタン、および「アンサー4」のテキストエリアとラジオボタンがすべて無効になります。 「上のすべて」が選択されている場合、「すべての上」および「回答4」を除いて、同じことが起こります。これはすべて正常に動作します。

問題は、選択されているラジオボタンが無効になっていて、無効になっていて、そのラジオボタンを無効にして、チェックボックスに対応するラジオボタンを選択することです。私はこれを達成するための様々な方法を試みましたが、どれも成功していませんでした。最近では、ラジオボタングループの値を使用して、選択するラジオボタンと選択を解除するラジオボタンを決定しようとしました。

私は時間がかかることは知っていますが、HTMLとJQueryの両方を含むページ全体のコードを含めています。

@using WebContentDemo.Helpers; 
@{ 
    ViewBag.Title = "Add A Question To Test"; 
} 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 

     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      @using (Html.BeginForm("AddQuestion", "Test", FormMethod.Post)) 
      { 
       <div class="panel @Utilities.PanelColor()"> 
        <div class="panel-heading text-center"> 
         <h2 style="margin-top:1px;margin-bottom:1px;">@ViewBag.Title </h2> 
        </div> 
        <div class="panel-body text-center" style="padding-left:15px;padding-right:15px;"> 

         <div class="row" style="margin-bottom:15px;"> 
          <div class="col-md-6"> 
           <p> 
            Type in the question text for this question in the text field to the right. After that, you can 
            type in the text for up to four answers. If you choose to make one of the possible answers "All Of The Above" 
            or "None Of The Above", the option that you do not choose, and the fourth answer text field will be disabled. 
           </p> 
           <p> 
            Ensure that you mark the correct answer with the radio button 
            (<input type="radio" disabled="disabled" style="cursor:default" />) next to the that answer. By default, the 
            radio button for the first answer will be selected, so you could also simply make sure to always type the 
            correct answer into that field. 
           </p> 
          </div> 
          <div class="col-md-6 text-center"> 
           <label for="QuestionText">Question Text</label> 
           <textarea class="form-control" id="QuestionText" placeholder="Question Text" autofocus="autofocus" rows="6" type="text" style="max-width:100%;width:100%" required="required" name="QuestionText"></textarea> 
          </div> 
         </div> 
         <hr /> 
         <div class="row"> 
          <div class="col-md-4"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label for="Answer_1">First Answer</label> 
            </div> 
            <div class="panel-body"> 
             <textarea class="form-control" id="Answer_1" placeholder="First Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_1"></textarea> 
            </div> 
            <div class="panel-footer"> 
             <label for="Answer_1_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="Answer_1_Radio" class="form_radio" checked="checked" name="CorrectAnswer" value="Answer_1" /> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label for="Answer_2">Second Answer</label> 
            </div> 
            <div class="panel-body"> 
             <textarea class="form-control" id="Answer_2" placeholder="Second Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_2"></textarea> 
            </div> 
            <div class="panel-footer"> 
             <label for="Answer_2_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="Answer_2_Radio" class="form_radio" name="CorrectAnswer" value="Answer_2" /> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label for="Answer_3">Third Answer</label> 
            </div> 
            <div class="panel-body"> 
             <textarea class="form-control" id="Answer_3" placeholder="Third Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_3"></textarea> 
            </div> 
            <div class="panel-footer"> 
             <label for="Answer_3_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="Answer_3_Radio" class="form_radio" name="CorrectAnswer" value="Answer_3" /> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-4" style="max-height:100%;height:100%;"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label>Other</label> 
            </div> 
            <div class="panel-body" style="max-height:100%;height:100%;"> 
             <label for="AllOfTheAbove">All Of The Above</label> 
             <input type="checkbox" value="true" id="AllOfTheAbove" name="AllOfTheAbove" /> 
            </div> 
            <div class="panel-footer"> 
             <label for="AllOfTheAbove_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="AllOfTheAbove_Radio" class="form_radio" name="CorrectAnswer" value="AllOfTheAbove" /> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-4" style="max-height:100%;height:100%;"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label>Other</label> 
            </div> 
            <div class="panel-body" style="max-height:100%;height:100%;"> 
             <label for="NoneOfTheAbove">None Of The Above</label> 
             <input type="checkbox" value="true" id="NoneOfTheAbove" name="NoneOfTheAbove" /> 
            </div> 
            <div class="panel-footer"> 
             <label for="NoneOfTheAbove_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="NoneOfTheAbove_Radio" class="form_radio" name="CorrectAnswer" value="NoneOfTheAbove" /> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <div class="panel @Utilities.PanelColor()"> 
            <div class="panel-heading" style="padding-top:5px;padding-bottom:5px;"> 
             <label for="Answer_4">Fourth Answer</label> 
            </div> 
            <div class="panel-body"> 
             <textarea class="form-control" id="Answer_4" placeholder="Third Answer" style="max-width:100%;width:100%;" rows="4" required="required" name="Answer_3"></textarea> 
            </div> 
            <div class="panel-footer"> 
             <label for="Answer_4_Radio">This Is The Correct Answer</label> 
             <input type="radio" id="Answer_4_Radio" class="form_radio" name="CorrectAnswer" value="Answer_4" /> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="panel-footer"> 
         <div class="row"> 
          <div class="col-md-6 text-center"> 
           <label for="AddAnother">Add Another Question?</label> 
           <input type="checkbox" value="true" id="AddAnother" name="AddAnother" /> 
          </div> 
          <div class="col-md-6 text-center"> 
           <input style="max-width:100%;width:100%;" class="btn btn-success" type="submit" value="Add This Question" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      } 
     </div> 
    </div> 
</div> 

@section scripts 
{ 
    <script type="text/javascript"> 
     $('#AllOfTheAbove').click(function() { 
      if ($('#AllOfTheAbove').is(':checked')) { 
       $('#Answer_4').prop("disabled", "disabled"); 
       $('#NoneOfTheAbove').prop("disabled", "disabled"); 
       $('#NoneOfTheAbove_Radio').prop("disabled", "disabled"); 
       $('#Answer_4_Radio').prop("disabled", "disabled"); 
       if ($('.form_radio').val() == "NoneOfTheAbove") { 
        $('#NoneOfTheAbove_Radio').removeAttr("checked"); 
        $('#AllOfTheAbove_Radio').prop("checked", "checked"); 
       } 
       if ($('.form_radio').val() == "Answer_4") { 
        $('#Answer_4').removeAttr("checked"); 
        $('#AllOfTheAbove_Radio').prop("checked", "checked"); 
       } 
      } 
      else if ($('#AllOfTheAbove').not(':checked')) { 
       $('#Answer_4').removeAttr("disabled"); 
       $('#NoneOfTheAbove').removeAttr("disabled"); 
       $('#NoneOfTheAbove_Radio').removeAttr("disabled"); 
       $('#Answer_4_Radio').removeAttr("disabled"); 
      } 
     }); 
     $('#NoneOfTheAbove').click(function() { 
      if ($('#NoneOfTheAbove').is(':checked')) { 
       $('#Answer_4').prop("disabled", "disabled"); 
       $('#AllOfTheAbove').prop("disabled", "disabled"); 
       $('#AllOfTheAbove_Radio').prop("disabled", "disabled"); 
       $('#Answer_4_Radio').prop("disabled", "disabled"); 
       if ($('.form_radio').val() == "AllOfTheAbove") { 
        $('#AllOfTheAbove_Radio').removeAttr("checked"); 
        $('#NoneOfTheAbove_Radio').prop("checked", "checked"); 
       } 
       if ($('.form_radio').val() == "Answer_4") { 
        $('#Answer_4').removeAttr("checked"); 
        $('#NoneOfTheAbove_Radio').prop("checked", "checked"); 
       } 
      } 
      else if ($('#AllOfTheAbove').not(':checked')) { 
       $('#Answer_4').removeAttr("disabled"); 
       $('#AllOfTheAbove').removeAttr("disabled"); 
       $('#AllOfTheAbove_Radio').removeAttr("disabled"); 
       $('#Answer_4_Radio').removeAttr("disabled"); 
      } 
     }); 
    </script> 
} 

Answer 1

私はあなたの質問を理解してきたように、あなたはチェックボックスのいずれかがクリックされたときに、他の正解オプションを無効にしたいです。

なぜprop（）を使ってattr（）/ removeAttr（）を使ってこのようなことができるのですか？ プロパティを取得または設定するときは、基本的にprop（）を使用する必要があります（autoplay、checked、disabled、およびrequiredなど）。

removeAttr（）を使用すると、無効な属性自体が完全に削除されます。prop（）は、プロパティの基になるブール値をfalseに設定するだけです。

あなたがしたいことは、attr（）/ removeAttr（）を使用して行うことができますが、実行する必要はありません（この場合、奇妙な/問題のある動作が発生する可能性があります）。私はちょうど私が望んでいたとして、それが正確に機能するために取得するにはT. Shahのコードにいくつかの変更をしなければならなかった

Answer 2

このことができます

<script type="text/javascript"> 
    $('#AllOfTheAbove').click(function() { 
     if ($('#AllOfTheAbove').is(':checked')) { 
      console.log("All checked"); 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
      //$('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', true); }); //disable all     
      $("#Answer_4_Radio").prop('disabled', true); 
      $("#NoneOfTheAbove_Radio").prop('disabled', true); 
      $("#NoneOfTheAbove").prop('checked', false); 

      $('#AllOfTheAbove_Radio').prop("checked", true); 
      $('#AllOfTheAbove_Radio').prop("disabled", false); 
     } 
     else if ($('#AllOfTheAbove').not(':checked')) { 
      console.log("All un checked"); 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', false); }); //enable all 
     } 
    }); 
    $('#NoneOfTheAbove').click(function() { 
     if ($('#NoneOfTheAbove').is(':checked')) { 
      console.log("None checked"); 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
      //$('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', true); }); //disable all 
      $("#Answer_4_Radio").prop('disabled', true); 
      $("#AllOfTheAbove_Radio").prop('disabled', true); 
      $("#AllOfTheAbove").prop('checked', false); 

      $('#NoneOfTheAbove_Radio').prop("checked", true); 
      $('#NoneOfTheAbove_Radio').prop("disabled", false); 
     } 
     else if ($('#AllOfTheAbove').not(':checked')) { 
      console.log("None un checked"); 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
      $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', false); }); //enable all     
     } 
    }); 

    $('#NoneOfTheAbove_Radio').click(function() { 
     if ($('#NoneOfTheAbove_Radio').is(':checked')) { 
      $("#NoneOfTheAbove").prop("checked", true); 
      $("#AllOfTheAbove").prop("checked", false); 
     } 
    }); 

    $('#AllOfTheAbove_Radio').click(function() { 
     if ($('#AllOfTheAbove_Radio').is(':checked')) { 
      $("#AllOfTheAbove").prop("checked", true); 
      $("#NoneOfTheAbove").prop("checked", false); 
     } 
    });   
</script> 

希望...。ここに私がしたことがあります。

<script type="text/javascript"> 
$('#AllOfTheAbove').click(function() { 
    if ($('#AllOfTheAbove').is(':checked')) { 
     console.log("All checked"); 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
     $("#Answer_4_Radio").prop('disabled', true); 
     $("#NoneOfTheAbove_Radio").prop('disabled', true); 
     $("#NoneOfTheAbove").prop('checked', false); 
     $("#Answer_4").prop('disabled', true); 
     $('#AllOfTheAbove_Radio').prop("checked", true); 
     $('#AllOfTheAbove_Radio').prop("disabled", false); 
    } 
    else if ($('#AllOfTheAbove').not(':checked')) { 
     console.log("All un checked"); 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', false); }); //enable all 
     $("#Answer_4").prop('disabled', false); 
     $("#Answer_1_Radio").prop("checked", true); 
    } 
}); 
$('#NoneOfTheAbove').click(function() { 
    if ($('#NoneOfTheAbove').is(':checked')) { 
     console.log("None checked"); 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
     $("#Answer_4_Radio").prop('disabled', true); 
     $("#AllOfTheAbove_Radio").prop('disabled', true); 
     $("#AllOfTheAbove").prop('checked', false); 
     $("#Answer_4").prop('disabled', true); 
     $('#NoneOfTheAbove_Radio').prop("checked", true); 
     $('#NoneOfTheAbove_Radio').prop("disabled", false); 
    } 
    else if ($('#AllOfTheAbove').not(':checked')) { 
     console.log("None un checked"); 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('checked', false); }); //uncheck all first.. 
     $('input:radio[name=CorrectAnswer]').each(function() { $(this).prop('disabled', false); }); //enable all 
     $("#Answer_4").prop('disabled', false); 
     $("#Answer_1_Radio").prop("checked", true); 
    } 
}); 

$('#NoneOfTheAbove_Radio').click(function() { 
    if ($('#NoneOfTheAbove_Radio').is(':checked')) { 
     $("#NoneOfTheAbove").prop("checked", true); 
     $("#AllOfTheAbove").prop("checked", false); 
     $("#AllOfTheAbove_Radio").prop('disabled', true); 
     $("#Answer_4").prop('disabled', true); 
     $("#Answer_4_Radio").prop('disabled', true); 
    } 
}); 

$('#AllOfTheAbove_Radio').click(function() { 
    if ($('#AllOfTheAbove_Radio').is(':checked')) { 
     $("#AllOfTheAbove").prop("checked", true); 
     $("#NoneOfTheAbove").prop("checked", false); 
     $("#NoneOfTheAbove_Radio").prop('disabled', true); 
     $("#Answer_4").prop('disabled', true); 
     $("#Answer_4_Radio").prop('disabled', true); 
    } 
});