ラベルの色を変更すると問題が発生する

Question

私はウェブ開発者ではありませんが、コードで何かを修正しようとしていますので、何か見落としてもよろしいですか？

別のチェックボックスをオンにすると、チェックボックスとラベルを無効にしようとしています。

<dl id="someParent"> 
<dd><input type="checkbox" name="checkbox1" id="checkbox1"/> 
<label for="checkbox1" data-localize="someText.name1" class="checkbox1"> </label> 
</dd><dd> 
<input type="checkbox" name="checkbox2" id="checkbox2"/> 
<label for="checkbox2" data-localize="someText.name2" class="checkbox2"> </label> 
</dd><div class="clear"></div></dl> 

JS：

これは私のHTMLはどのように見えるかで、元のコードで

$('#checkbox1').click(function() { 
if($("#checkbox1").is(':checked')){ 
    $('#checkbox2').attr("disabled", true); 
    $('label[data-localize="someText.name2"]').css("color", "red"); //This doesn't work 
    } else { 
    $('#checkbox2').removeAttr('disabled'); 
    //Code to change label color. How, to access data-localize="someText.name2"? Where someText.name2 is defined in a json file as string, someText.name2: "This will be printed as label 1" 
    } 
});        

$('#checkbox2').click(function() { 
if($("#checkbox2").is(':checked')){ 
    $('#checkbox1').attr('disabled', true); 
    //Code to change label color. How, to access data-localize="someText.name1"? Where someText.name1 is defined in a json file as string, someText.name1: "This will be printed as label 2" 
    } else { 
     $('#checkbox1').removeAttr('disabled'); 
     $('label[data-localize="someText.name1"]').css("color", "black"); //This doesn't work 
    } 
}); 
//My issue is I can not access and hence change color of "someText.name1/2" which is a label/text next to the Checkbox1/2. Disabling the Checkbox is not an issue but greying out the label next to checkbox is an issue. 

、プログラムはとしてJSONファイルからマッピング文字列でsomeText.name1/2を置き換えますラベル。

htmlでラベルを使用すると（jsfiddleで見たように、ラベルとしてCheckbox1,2を使用しています）、jsonファイルのデータローカライズ文字列をコードで置き換えても機能しません。 checbox自体は正しく動作していますが、ラベルは色が変わりません。

注：コードのアーキテクチャを変更できないため、データローカライズのみを使用する必要があります。また、この問題は、ラベルの色を変更することではなく、データローカライズを使用するときにラベルにアクセスして変更する方法についてです。

また、チェックボックス1とチェックボックス2のラベルは、元のコードではなく、someText.name1とsomeText.name2の代わりに動的に生成されます。

例：https://jsfiddle.net/w8s9rLme/34/

Answer 1

この問題は、どのような方法で色を変更しても変更されないということでした。その理由は、誰かがCSSクラスの色の隣に「！重要」を使用していたため、ラベルの色が何であっても何も変わっていなかったからです。

Answer 2

私はコード（がdata-localize属性にそれは不可知論作る）ビットを一般化/簡素化し、また、色を設定するためのクラスを使用します。

$('#someParent').on('change', ':checkbox', function(){ 
 
    var otherDD = $(this).closest('dd').siblings(); 
 
     
 
    otherDD.find(':checkbox') 
 
      .prop('disabled', this.checked); 
 
      
 
    otherDD.find('[data-localize]') 
 
      .toggleClass('disabled-checkbox', this.checked); 
 
});

.disabled-checkbox{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- ^^ added for demo ^^ --> 
 

 
<dl id="someParent"> 
 
    <dd> 
 
    <input type="checkbox" name="checkbox1" id="checkbox1" /> 
 
    <label for="checkbox1" data-localize="someText.name1" class="checkbox1">Checkbox1</label> 
 
    </dd> 
 
    <dd> 
 
    <input type="checkbox" name="checkbox2" id="checkbox2" /> 
 
    <label for="checkbox2" data-localize="someText.name2" class="checkbox2">Checkbox2</label> 
 
    </dd> 
 
    <div class="clear"></div> 
 
</dl>

Answer 3

この質問はまだかなり不明であるが、私はあなたが行っているところ私が見ると思います。ここでは特に、あなたの質問に答えるために更新jsfiddle https://jsfiddle.net/w8s9rLme/35/

です：ここにあなたがラベルにアクセスしたい方法は次のとおりです。

var label = $('label.checkbox1').attr("data-localize"); 

そして、ここでは、あなたが（テキストを更新するために、データ・ローカライズを使用して）それを設定したい方法です：

$('label[data-localize="someText.name1"]').text(label); 

けれども、（あなたがデータ局在が何であるかを知らないかもしれないと仮定して）あまり特異的にそれを参照する方が良いでしょう。

$('label.checkbox1').text(label); 

これは、データのローカライズにはあまり依存しません。