Setting a color for a checkbox label

I want to do the above subject matter for the phrase "Include items above during check out". When I debug via Firebug, the correct lines in the script are getting hit, but the color never changes.

Can somebody tell me what's wrong?

HTML

<td colspan="7" valign="middle" align="left" class="underline" style="line-height: 20px;padding: 0; color: #fff;">
    <span class="eg_checkbox" style="font-weight:bold;">
        <input id="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit" type="checkbox" name="ctl00$mainContentPlaceHolder$datalistDTO$ctl01$chkShiptoSubmit" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ctl00$mainContentPlaceHolder$datalistDTO$ctl01$chkShiptoSubmit\',\'\')', 0)"/>
        <label for="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit">Include items above during check out</label>
    </span>
</td>

JS

$(document).ready(function () {
    if ($('#ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit').is(':checked')) {
        $('label[for=#ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit]').css('color', 'red');
    }
    else {
        $('label[for=#ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit]').css('color', 'blue');
    }
});

Answers


Your 'for' selector is wrong in your jquery:

$(document).ready(function() {
    if ($('#ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit').is(':checked')) {
        $('label[for="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit"]').css('color', 'red');
    }
    else {
        $('label[for="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit"]').css('color', 'blue');
    }
});‚Äč

DEMO


You should not use # sign in your attribute selector and instead of selecting the elements multiple times you can cache the selector and use next() method which selects the next element. Try the following:

$(document).ready(function () {
    var $checkbox = $('#ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit'); 
    if ($checkbox.is(':checked')) {
        $checkbox.next('label').css('color', 'red');
    }
    else {
        $checkbox.next('label').css('color', 'blue');
    }
});

DEMO


It was your #. Check this jsFiddle

Notice the for=ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit


http://jsfiddle.net/NbVUm/

html:

<table><tr>
<td colspan="7" valign="middle" align="left" class="underline"
    style="line-height: 20px; padding: 0; color: #fff;">
  <span class="eg_checkbox" style="font-weight:bold;">
    <input id="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit"
      type="checkbox"
      name="ctl00$mainContentPlaceHolder$datalistDTO$ctl01$chkShiptoSubmit"
      checked="checked" />
    <label for="ctl00_mainContentPlaceHolder_datalistDTO_ctl01_chkShiptoSubmit">
      Include items above during check out
    </label>
  </span>
</td>

</tr></table>

js:

$(function()
{
  var cb = $(':checkbox');
  cb.change(on_cb_changed);

  on_cb_changed();

  function on_cb_changed()
  {
    var label = cb.next('label');

    label.css('color', cb.is(':checked') ? 'red' : 'blue');
  }
});

Need Your Help

PHP session expires from android WebService

php android web-services session-variables

I'm coding an android app that sometimes uses php scripts and I'm now trying to use some Session IDs in the php scripts that I'm using. So when the user loggs (login/pwd) on the webservice from the

How to remove checked items from listview and in database

android android-listview

Hi i want to remove the checked items from the listview and in database.Iam using menus for that.If delete is selected from the menu then i want to remove the selected items from the listview and i...