javascript - Issue with changing label color -
i not web developer trying fix in code, please excuse me if overlooking something.
i trying disable checkbox , label when checkbox checked.
this how 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 change label color. how, access data-localize="sometext.name2"? sometext.name2 defined in json file string, sometext.name2: "this printed label 1" } }); $('#checkbox2').click(function() { if( $("#checkbox2").is(':checked') ){ $('#checkbox1').attr('disabled', true); //code change label color. how, access data-localize="sometext.name1"? sometext.name1 defined in json file string, sometext.name1: "this printed label 2" } else { $('#checkbox1').removeattr('disabled'); $('label[data-localize="sometext.name1"]').css("color", "black"); //this doesn't work } }); //my issue can not access , hence change color of "sometext.name1/2" label/text next checkbox1/2. disabling checkbox not issue greying out label next checkbox issue.
in original code, program replaces sometext.name1/2 mapping string json file label.
i can make work if use label in html(as seen in jsfiddle have used checkbox1,2 label), not when code replaces data-localize string json file. checboxes working correctly label doesnt change color.
note: can't change architecture of code, therefore have use data-localize only. also, question not changing color of label, how access , change label when data-localize used.
also, checkbox1 , checkbox2 labels not in original code instead generated dynamically replacing sometext.name1 , sometext.name2.
example: https://jsfiddle.net/w8s9rlme/34/
i simplify/generalize code (make agnostic data-localize
attribute) bit , use class setting 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 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>
Comments
Post a Comment