将下拉菜单转换为收音机或仅使用 javascript/jquery 更改选择？

Question

我最近设法通过从 php 动态输出一些数据并使用 jquery 根据我的电子商务网站的库存数量禁用下拉列表中的某些选项来使下拉选择起作用。

这里是代码：http://jsbin.com/osipe5/2/edit

现在的问题是，我现在希望将选择显示为单选按钮，并最终使用 css 来设置类似于以下内容的样式：http://jsbin.com/uwuje（由另一个 SO 用户发布）

所以我的问题是：我应该将下拉列表完全转换为链接的单选按钮选择还是执行以下操作：http://jsfiddle.net/yJTdF/（由另一个 SO 用户发布）其中单选按钮由 jquery 生成并使用 css 隐藏下拉列表？

我担心可用性和跨浏览器问题。

非常感谢任何意见。

谢谢！

Answer 1

如果您以progressive enhancement 为生，那么当其他一切都失败时，您呈现的标记应该仍然可用（并且在语义上有效）：

• CSS 已禁用
• JavaScript 已禁用
• 不支持图片
• 低屏幕分辨率（例如移动设备）
• 没有悬停事件（触摸屏）

在这些情况下使用任何有意义的东西，并使用 jQuery 为其他人提供皮条客。下拉菜单可能会稍微提高您在移动设备上的可用性。

Answer 2

我觉得jQueryUI Button 非常好，它可以帮助您轻松设置按钮样式。

它适用于actual radio buttons，所以如果标记你的 HTML 正确并且没有使用 JS，它不会伤害任何人。

无论如何，如果您计划支持非 JavaScript 浏览器（您应该这样做），您必须有一个服务器端验证例程。

Answer 3

首先，您需要考虑使用您的应用程序的人。对于连接速度较慢的用户来说，下拉列表会有点烦人，尤其是您说过这是针对您的电子商务网站的。您的网站可能会处理不同态度的多个最终用户。

下拉列表

• 在用户单击下拉列表并滚动查看这些项目之前，列表项是隐藏的。如果我们要判断用户界面问题，这将很重要。更多的客户更喜欢点击和点击而不是点击和滚动。

按钮

• 这些项目已经直接显示给最终用户，只需知道点击什么即可。只需通过查看和页面，最终用户就会知道哪些项目可用，而且他们更容易选择。

跨浏览器问题

• 可以随时处理。有很多方法可以让您的脚本在任何浏览器上运行。您可能会花更多时间处理 css 问题，而不是浏览器兼容性方面的 javascript 问题。到目前为止，javascipts 的常见问题是客户端禁用 javascripts 在其浏览器上运行。您可以确定使用服务器端控件。

Answer 4

我不建议相信用户启用了 javascript，因此“使用 jQuery 生成单选按钮”选项不可用。我会使用与您发布的第二个链接非常相​​似的东西（完全生成两个单选按钮组的 html），但仅使用 js 禁用在选择大小选项时需要禁用的颜色选项。此外，在服务器端，您需要再次进行这些检查，并且可能会输出一个错误页面。这样，仅使用标准 html（即无线电输入）和 css 来美化它，并使用 js 来做花哨的东西（这里的关键是，如果用户没有打开 js，他们仍然可以使用您的网站)，您可以拥有一个可用的跨浏览器解决方案。

Answer 5

如果在您的最终产品中您希望它的行为类似于第二个 jsbin 链接，那么我会说单选按钮更有意义。最后，与处理下拉菜单和完成最终产品所需的所有操作相比，它的工作量要少得多。

在实现方面，您可以更改类并单击禁用的单选按钮上的属性，以便它们相对不可用。而将下拉信息动态更改为单选按钮 UI...听起来很讨厌。