改变标签颜色的问题

Question

我不是一个Web开发人员，但试图修复代码中的东西，所以请原谅我，如果我忽略了一些东西。

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

这是我的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文件中的数据本地化字符串时，我可以使其工作。 Checboxes本身工作正常，但标签不会改变颜色。

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

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

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

Answer 1

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

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); 

这对数据本地化的依赖性会降低。