jQuery ID und Klassenselektor auf Klick-Funktion

Question

Ich habe diesen Code mit Klick-Funktion mit einem Selektor der ID-Kontrollkästchen Eingabe und eine Klasse Radio-Button-Eingabe, wenn entweder die beiden Eingänge aktiviert ist eine Schaltfläche wird ein Attribut von deaktiviert hinzufügen, sonst wird es das attrib entfernt, leider funktioniert es nicht wie kann man es mit einem anderen Selektor arbeiten lassen, wenn man auf eines von beiden klickt, wird ein Attribut hinzugefügt?

Hier ist der Code:

$("#callbackReq input.callbackopt").on("click", function() { 
 
    if ($("#callbackReq input.callbackopt").is(":checked")) { 
 
    $("#submitBtn").attr('disabled','disabled'); 
 
    } else { 
 
    $("#submitBtn").removeAttr('disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<label> 
 
    <input type="checkbox" value="" id="callbackReq" name="callbackReq"> 
 
    Call back 
 
</label> 
 

 
<br /> 
 
<label class="radio-inline radio-choices">   
 
    <input class="callbackopt" type="radio" name="acceptedModr" id="approved" value="Y" checked /> 
 
    Approved 
 
</label> 
 

 
<label class="radio-inline radio-choices"> 
 
    <input class="callbackopt" type="radio" name="acceptedModr" id="rejected" value="N"/> 
 
    Rejected 
 
</label> 
 

 
<br /> 
 

 
<button class="btn btn-primary move-right" type="submit" value="ENTER" id="submitBtn" name="submitBtn" disabled> 
 
    Save and Next 
 
</button>

Answer 1

Im Innern des Falls statemnt sollte auf aktuelles Element beziehen, das geklickt wurde. Versuchen Sie, den Code innerhalb der if-Anweisung wie folgt ändern:

$("#callbackReq,input.callbackopt").on("click", function() { 
 
    if (($(this).is(':checkbox') && $(this).is(":checked")) || $(this).val() == 'Y') { 
 
    $("#submitBtn").prop('disabled', false); 
 
    } else { 
 
    $("#submitBtn").prop('disabled', true); 
 
    } 
 
}); 
 

 
// or this if want radio button only 
 
/*$("#callbackReq,input.callbackopt").on("click", function() { 
 
    if ($(this).val() == 'Y') { 
 
    $("#submitBtn").prop('disabled', false); 
 
    } else { 
 
    $("#submitBtn").prop('disabled', true); 
 
    } 
 
});*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<label> 
 
    <input type="checkbox" value="" id="callbackReq" name="callbackReq">Call back 
 
</label> 
 

 
<br /> 
 
<label class="radio-inline radio-choices"> 
 
    <input class="callbackopt" type="radio" name="acceptedModr" id="approved" value="Y" />Approved 
 
</label> 
 

 
<label class="radio-inline radio-choices"> 
 
    <input class="callbackopt" type="radio" name="acceptedModr" id="rejected" value="N" checked/>Rejected 
 
</label> 
 

 
<br /> 
 

 
<button class="btn btn-primary move-right" type="submit" value="ENTER" id="submitBtn" name="submitBtn" disabled>Save and Next</button>

Answer 2

Hier ist eine Arbeitslösung :). Ich hoffe es hilft!

$(document).ready(function(){ 
 
\t $("#callbackReq, input.callbackopt").on("click", function(){ 
 
\t \t if ($(this).is(":checked")) { 
 
\t \t \t $("#submitBtn").prop('disabled','disabled'); 
 
\t \t } 
 
\t \t else if ($("input[name='acceptedModr']").is(":checked")) { 
 
\t \t \t $("#submitBtn").prop('disabled','disabled'); 
 
\t \t } 
 
\t \t else if(!$(this).is(":checked")) { 
 
\t \t \t $("#submitBtn").removeAttr('disabled'); 
 
\t \t } 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<label> 
 
\t <input type="checkbox" value="" id="callbackReq" name="callbackReq" >Call back 
 
</label> 
 

 
<br /> 
 
<label class="radio-inline radio-choices">   
 
\t <input class="callbackopt" type="radio" name="acceptedModr" id="approved" value="Y"/>Approved 
 
</label> 
 

 
<label class="radio-inline radio-choices"> 
 
\t <input class="callbackopt" type="radio" name="acceptedModr" id="rejected" value="N"/>Rejected 
 
</label> 
 

 
<br /> 
 

 
<button class="btn btn-primary move-right" type="submit" value="ENTER" id="submitBtn" name="submitBtn">Save and Next</button>