CODEWITHSUNDEEP
javascriptjqueryhtml
user353860
user353860

Reputation: 3

Issue with changing label color

I am not a web developer but trying to fix something in code, so please excuse me if I am overlooking something.

I am trying to disable a checkbox and label when another checkbox is checked.

This is how my html looks like:

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

In the original code, the program replaces someText.name1/2 with a mapping string from json file as a label.

I can make it work if I use a label in html(as seen in jsfiddle where I have used Checkbox1,2 as label), but not when code replaces the data-localize string from json file. The checboxes themselves are working correctly but the label doesnt change color.

Note: I can't change the architecture of code, therefore I have to use data-localize only. Also, this question is not about changing the color of label, but about how to access and change the label when data-localize is used.

Also, Checkbox1 and Checkbox2 labels are not in the original code instead they are generated dynamically replacing someText.name1 and someText.name2.

Example: https://jsfiddle.net/w8s9rLme/34/

Upvotes: 0

Views: 100

Answers (3)

user353860
user353860

Reputation: 3

So, the issue was that no matter what method I used to change the color, it would not get changed. And the reason was because someone had used "!important" next to the color in css class, and hence no matter what i did the color of label didnt change.

Upvotes: 0

Brian Wright
Brian Wright

Reputation: 877

This question is still pretty unclear but I think I see where you're going. Here's an updated jsfiddle https://jsfiddle.net/w8s9rLme/35/

To specifically answer your question: here's how you'd access the label:

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

And here's how you'd set it (using the data-localize to update the text):

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

Though, it would be better to reference it in a less-specific manner (assuming you may not know what data-localize will be).

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

That's less reliant on what data-localize will be.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

I would simplify/generalize the code (make it agnostic to the data-localize attribute) a bit and also use a class for setting the colors.

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

Upvotes: 1

Related Questions