Deaktivierte Klasse mit JS aktivieren

Question

Ich versuche, eine Schaltfläche zu deaktivieren, indem Sie eine Klasse hinzufügen, wenn ein bestimmtes Optionsfeld ausgewählt ist. Hier funktioniert meine erste Iteration von Javascript nicht.

var slug = $("input[name='slug']:checked").val(); 

$(document).on('change', 'input', function() { 
    if (slug == "the_lone_snitch") { 
    $(".button").addClass("disabled") 
    } 
}); 

So Jedes Mal, wenn der Radioknopf nicht „the_lone_snitch es die deaktivierte Klasse entfernt und jedes Mal ist es gleich‚the_lone_snitch‘fügt die Klasse.

Answer 1

Zunächst lassen Sie mich wissen, wenn Ihr obiger Code ist Behinderte Klasse hinzufügen oder nicht. Wenn ja, dann, was Sie verpasst geben sie einen anderen Teil, wenn slug nicht gleich „the_lone_snitch“

Ihre vollständige Code ist wie

aussehen sollte

var slug = $("input[name='slug']:checked").val(); 

$(document).on('change', 'input', function() { 
    if (slug == "the_lone_snitch") { 
    $(".button").addClass("disabled") 
    } 
    else{ 
    //This will enable to button when radio button is not equal to "the_lone_snitch" 
    $(".button").removeClass("disabled") 
    } 
}); 

Answer 2

Beachten Sie, dass zum Deaktivieren einer Schaltfläche die disabled -Eigenschaft auf true festgelegt werden soll, nicht nur eine Klasse hinzufügen. Wie auch immer ...

Ihr Code erhält nur den Wert von welcher Optionsfeld wurde zum Zeitpunkt der ersten Zeile, die vor dem Wechsel Ereignis auftritt überprüft. Sie benötigen den aktuellen Wert innerhalb die Änderung Handler, und Sie benötigen einen else Fall zu bekommen, die Klasse zu entfernen, wenn sie nicht benötigt:

$(document).on('change', 'input', function() { 
    var slug = $("input[name='slug']:checked").val(); 
    if (slug == "the_lone_snitch") { 
    $(".button").addClass("disabled").prop("disabled", true); 
    } else { 
    $(".button").removeClass("disabled").prop("disabled", false); 
    } 
}); 

Sie es aber ein bisschen vereinfachen kann, weil innerhalb des Handlers können Sie einfach Verwenden Sie this.value (wobei this das Element ist, auf das gerade geklickt wird), und verwenden Sie die .toggleClass() method, die einen booleschen Wert akzeptiert, um anzugeben, ob die Klasse hinzugefügt oder entfernt werden soll.

$(document).on('change', 'input[name="slug"]', function() { 
 
    var disable = this.value == "the_lone_snitch"; 
 
    $(".button").toggleClass("disabled", disable) 
 
    .prop("disabled", disable); 
 
});

.disabled { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label><input type="radio" name="slug" value="abc">Enabled</label> 
 
<label><input type="radio" name="slug" value="the_lone_snitch">Disabled</label> 
 
<br> 
 
<button class="button">Button</button>