Aktivieren/Deaktivieren der Steuerelemente bei der Auswahl von Radio mit jquery

Question

Ich versuche, bestimmte Steuerelemente abhängig von der Auswahl von Radio zu aktivieren/deaktivieren. es scheint nicht zu funktionieren. Ich möchte die deaktivierten Text- und Radio-Felder aktiviert werden, wenn Ja Radio ausgewählt ist. Bitte helfen!

ASP Snippet

   <div class="form-group" > 
        <label class="control-label">Whether any other children of the same family is studying in Primary/ Secondary Section of SVVHS</label><br /> 
        <input type="radio" value="yes" id="chkRelatedStudentYes" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">Yes</label><br /> 
        <input type="radio" value="no" id="chkRelatedStudentNo" runat="server" name="RelatedStudent" required="required"/> <label class="control-label">No</label> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Name of the Student</label> 
        <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name of the Related Student" id="txtRelatedStudentName" runat="server" disabled="disabled" /> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Section</label><br /> 
        <input type="radio" value="Primary" id="chkPrimary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Primary</label><br /> 
        <input type="radio" value="Secondary" id="chkSecondary" runat="server" name="Section" required="required" disabled="disabled"/> <label class="control-label">Secondary</label> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Standard</label> 
        <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Standard of the Related Student" id="txtStandard" runat="server" disabled="disabled"/> 
       </div> 
       <div class="form-group"> 
        <label class="control-label">Division</label> 
        <input maxlength="12" type="text" required="required" class="form-control" placeholder="Enter Division of the Related Student" id="txtDivision" runat="server" disabled="disabled"/> 
       </div> 

jquery Schnipsel

 <script type="text/javascript"> 
      $('#chkRelatedStudentYes').click(function() { 
       $('#txtRelatedStudentName').removeAttr("disabled"); 
       $('#chkPrimary').removeAttr("disabled"); 
       $('#chkSecondary').removeAttr("disabled"); 
       $('#txtStandard').removeAttr("disabled"); 
       $('#txtDivision').removeAttr("disabled"); 
      }); 
      $('#chkRelatedStudentNo').click(function() { 
       $('#txtRelatedStudentName').attr("disabled", "disabled"); 
       $('#chkPrimary').attr("disabled", "disabled"); 
       $('#chkSecondary').attr("disabled", "disabled"); 
       $('#txtStandard').attr("disabled", "disabled"); 
       $('#txtDivision').attr("disabled", "disabled"); 
      }); 
</script> 

Answer 1

Ich fand, was das Problem war. Das Skript konnte das Element nicht nach ID oder seinem NAME-Attribut finden. Ich versuchte alle möglichen Möglichkeiten, das Skript auf Klick auf das Element zu feuern und erkannte, dass es funktionierte, wenn ich - $ ("input [type = radio]: radio") und auch mit dem Klassennamen - $ (" .form-control „) modifizierte ich das Drehbuch und verwendet, um die unten Skript und boom es

$("input[type=radio]:radio").click(function() { 
    if ($(this).val() == 'yes') { 
     $(".form-control-disable").removeAttr("disabled"); 
      } 
    else if ($(this).val() == 'no') { 
     $(".form-control-disable").attr("disabled", "disabled");  
      } 
});  

arbeitete ich die folgende Klasse für den Text und Funksteuerungen verwendet, die deaktiviert werden musste“ .form-control-disable“ und es hat funktioniert. Ich danke Abhi für seine Geduld und Hilfe. :)

Answer 2

Sie könnten jQuery prop() -Methode statt removeAttr() verwenden. Versuchen Sie, diese -

$('#chkRelatedStudentYes').click(function() { 
    $('#txtRelatedStudentName').prop("disabled", false); 
    $('#chkPrimary').prop("disabled", false); 
    $('#chkSecondary').prop("disabled", false); 
    $('#txtStandard').prop("disabled", false); 
    $('#txtDivision').prop("disabled", false); 
}); 

Answer 3

Hallo Ihr Weg Auslösefall falsch ist

Bitte versuchen Sie dies, hier ist komplett Code,

Hinweis funktionieren sollte: Getestet es

$(document).ready(function() { 
     $("input[name=RelatedStudent]:radio").click(function() { // attack a click event on all radio buttons with name 'radiogroup' 


       if($(this).val() == 'yes') {//check which radio button is clicked 
         $('#txtRelatedStudentName').removeAttr("disabled"); 
       $('#chkPrimary').removeAttr("disabled"); 
       $('#chkSecondary').removeAttr("disabled"); 
       $('#txtStandard').removeAttr("disabled"); 
       $('#txtDivision').removeAttr("disabled"); 
       } else if($(this).val() == 'no') { 
         $('#txtRelatedStudentName').attr("disabled", "disabled"); 
       $('#chkPrimary').attr("disabled", "disabled"); 
       $('#chkSecondary').attr("disabled", "disabled"); 
       $('#txtStandard').attr("disabled", "disabled"); 
       $('#txtDivision').attr("disabled", "disabled"); 
       } 
     }); 
}); 

können Sie versuchen Sie es hier https://jsfiddle.net/abhiyx/fgen1br9/

Answer 4

Da die HTML-Elemente auf dem Server gerendert werden, ändern sich die IDs der Elemente. Während die IDs in Javascript zugreifen, benutzen Sie bitte wie folgt vor:

$('#<%# chkRelatedStudentYes.ClientID%>').removeAttr("disabled");