I'm writing my own CSS for jQuery UI.
Basically, I need to have different styles for radio buttons, checkboxes and regular buttons.
The problem here is that jQuery's classes add to the fake widget do not specify what kind of button it is.
For example, let's say we have this code:
<input type="checkbox" name="location[]" id="location1" value="Somewhere" />
<label for="location1">Somewhere</label>
<script type="text/javascript">
$(document).ready(function(){
jQuery('input').button();
});
</script>
jQuery transforms those two elements into:
<input type="checkbox" name="location[]" id="location1" value="Somewhere"
class="ui-helper-hidden-accessible">
<label for="location1" aria-pressed="false" role="button" aria-disabled="false"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Somewhere</span>
</label>
As you can see, the modified label and generated span do not have any class the tells me it is a checkbox (or radio/button).
The ideal solution would be based on hopefully some class I didn't notice. The second best solution would be to monkey patch jQuery UI to add a better class to those inputs. The final possible solution would be to hack jQuery files...though I really want to avoid this.
Be warned that any kind of fanboyism, nonconstructive comments and similar answers will not be tolerated. The problem is jQuery UI, I don't want to hear about mootools, extjs or whatever trendy l33t library comes up to your mind.
you can add $('input:checkbox').addClass('ui-checkbox') to add ui-checkbox class to the input and something like that :
$('input:checkbox').each(function() {
$('label[for="'+this.id.+'"]').addClass('ui-checkbox-label');
})
to add the ui-checkbox-labelclass to all label of your checkbox