jquery newbie question

I need your help creating a jquery function for checkboxes when these are disabled, pretty much I want to do something like if the input has attribute disable apply css to the label next to it, if not do nothing. Thanks in adv开发者_C百科ance for your help.

The html looks something like this:

<div class="add-filters">
  <table>
    <tr>
      <td>
       <input type="checkbox" id="filter" name="filter" disabled="disabled" />
       <label for="filter">Filter</label>
      </td>
    </tr>
  </table>
</div>

You can use the CSS3 :disabled pseudo-class and the next adjacent sibling selector +:

$("input:disabled + label").css(/* ... */);

This will also work without the use of JavaScript in browsers that support CSS3:

input:disabled + label {
    color: silver;
}

Working demo: http://jsfiddle.net/g76U4/

$('input[type="checkbox"]').each(function() {
  if($(this).attr('disabled')) {
    $(this).siblings('label').addClass('newClassName');
  }
});

Way easier to read:

$('input:checkbox:disabled').next().css({color:'#000'}); // use your own styles.

or with a class:

$('input:checkbox:disabled').next().addClass('yourclass');

http://api.jquery.com/disabled-selector/

Or if your DOM changes, you could do this:

$('input:checkbox:disabled').siblings('label:first').addClass('yourclass');

$(function() {
  $("input[disabled], textarea[disabled]").each(function() {
    $(this).next('label').css('color','#0000FF');
  });
});