区分 jQuery UI CSS 中的复选框、按钮和单选按钮

Question

我正在为 jQuery UI 编写自己的 CSS。

基本上，我需要为单选按钮、复选框和常规按钮提供不同的样式。

这里的问题是，添加到假小部件的 jQuery 类没有指定它是什么类型的按钮。

例如，假设我们有以下代码：

<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 将这两个元素转换为：

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

如您所见，修改后的标签和生成的范围没有任何类告诉我它是一个复选框（或单选按钮）。

理想的解决方案希望基于一些我没有注意到的类。第二个最佳解决方案是对 jQuery UI 进行猴子修补，为这些输入添加更好的类。最终可能的解决方案是破解 jQuery 文件......尽管我真的想避免这种情况。

---

请注意，任何形式的粉丝主义、非建设性评论和类似答案都不会被容忍。问题是 jQuery UI，我不想听到 mootools、extjs 或您想到的任何流行的 l33t 库。

Answer 1

您可以添加 $('input:checkbox').addClass('ui-checkbox') 将 ui-checkbox 类添加到输入以及类似的内容：

$('input:checkbox').each(function() {
  $('label[for="'+this.id.+'"]').addClass('ui-checkbox-label');
})

添加复选框的所有标签的 ui-checkbox-label 类

Answer 2

这是我带来的：

http://jsfiddle.net/fWPK6/

我们使用 jQuery ui create 方法在创建按钮时查找输入类型属性，然后将其添加到标签中。我必须指出一件非常重要的事情，每个输入字段都必须有 id 并且相应的标签必须有正确的 for 属性。

如果您需要对类进行更多自定义，只需修改 addClass(type) 即可。