javascript - 更改标签颜色的问题

Question

我不是网络开发人员，但试图修复代码中的某些内容，所以如果我忽略了某些内容，请原谅。

我试图在选中另一个复选框时禁用一个复选框和标签。

这就是我的 html 的样子:

<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:

$('#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.

在原始代码中，程序将 someText.name1/2 替换为 json 文件中的映射字符串作为标签。

如果我在 html 中使用标签(如 jsfiddle 中所示，我使用 Checkbox1,2 作为标签)，我可以使其工作，但当代码替换 json 文件中的数据本地化字符串时则不行。复选框本身工作正常，但标签不改变颜色。

注意:我无法更改代码的架构，因此我只能使用数据本地化。另外，这个问题不是关于改变标签的颜色，而是关于使用data-localize时如何访问和改变标签。

此外，Checkbox1 和 Checkbox2 标签不在原始代码中，而是动态生成的，替换 someText.name1 和 someText.name2。

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

Answer 1

我会稍微简化/概括代码(使其与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>