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字符串时不能。 checbox本身工作正常，但标签不会改变颜色。

注意：我无法更改代码的体系结构，因此我只能使用数据本地化。此外，这个问题不是关于更改标签的颜色，而是关于如何在使用数据本地化时访问和更改标签。

此外，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>

Answer 2

这个问题仍然不清楚，但我想我知道你要去哪里。这是一个更新的jsfiddle https://jsfiddle.net/w8s9rLme/35/

专门回答您的问题：以下是您访问标签的方式：

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

以下是您设置它的方法（使用data-localize更新文本）：

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

尽管如此，最好以一种不太具体的方式引用它（假设您可能不知道数据本地化将是什么）。

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

这不太依赖于数据本地化。

Answer 3

所以，问题是无论我用什么方法改变颜色，它都不会改变。原因是因为有人使用过＆＃34;！important＆＃34;在css类的颜色旁边，因此无论我做什么，标签的颜色都没有改变。

更改标签颜色的问题

3 个答案: