JSで無効にしたクラスを切り替えます

Question

特定のラジオボタンが選択されている場合、クラスを追加してボタンを無効にしようとしています。ここで私はJavascriptの最初の反復作業をしていません。

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

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

ので、たびにラジオボタンは「それが無効になったクラスを削除the_lone_snitch、それがために同じだたびに 『the_lone_snitch』それはクラスを追加します。

Answer 1

まず、あなたの上記のコードがある場合は私に知らせていません無効なクラスを追加するかどうか。 はい、 はその後、何を逃したことは、それを他の部分を与えている場合、スラグは「the_lone_snitch」に等しくないとき

あなたの完全なコードは

のようになります。 0

Answer 2

disabledプロパティをtrueに設定するボタンを無効にするには、クラスを追加するだけでなく、とにかく...

コードは、変更イベントが発生する前のの最初の行が実行されたときに、と表示されたラジオボタンの値のみを取得します。あなたは変更ハンドラ内の現在の値を取得する必要があり、あなたが必要としない場合は、クラスを削除するelseケースを必要とする：

$(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); 
    } 
}); 

あなたは少ししかしそれを簡略化することができ、ハンドラ内であなただけのことができるので、 this.value（thisはちょうどクリックされた要素です）を使用し、.toggleClass() methodを使用します。これは、クラスの追加または削除の可否を示すブール値を受け入れます。

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