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

【问题标题】：Differentiating between checkboxes, buttons and radios in jQuery UI CSS区分 jQuery UI CSS 中的复选框、按钮和单选框
【发布时间】：2012-01-23 21:46:01
【问题描述】：

我正在为 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 文件……尽管我真的很想避免这种情况。

请注意，我们不会容忍任何形式的狂热、非建设性的 cmet 和类似的答案。问题是 jQuery UI，我不想听到 mootools、extjs 或任何你想到的时髦的 l33t 库。

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-theme

【解决方案1】：

您可以添加$('input:checkbox').addClass('ui-checkbox') 以将ui-checkbox 类添加到输入等：

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

将ui-checkbox-labelclass 添加到复选框的所有标签

【讨论】：

虽然这并不理想（其他开发者必须更改现有的 jQuery 代码），但我认为这是最合理的解决方案。

【解决方案2】：

这是我带来的：

http://jsfiddle.net/fWPK6/

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

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

【讨论】：