Firefox中禁用元素的标题属性

Question

我正在构建一个非常动态的基于Web的应用程序，它使用许多Javascript来处理用户事件。我正在使事情变得更有用，并且遇到了我从未遇到过的问题。

我正在使用jQuery，因此请考虑到您的答案。提前致谢。

我有一组按钮元素定义为：

<input type="button" title="My 'useful' text here." disabled="disabled" />

这些按钮的默认样式为：

div#option_buttons input {
     cursor: help;
}

然后，使用jQuery在选择框上将以下内容作为单击事件运行：

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

因此，如您所见，当在选择框中选择一列（此处未显示）时，我希望按钮被启用并表现得像按钮一样（带有我自己的单击事件）。但是，当未选择列（包括默认加载）时，我希望禁用按钮。我本人的可用性开发人员希望为用户提供微妙的上下文线索，以帮助他们通过将title属性作为轻量级工具提示进行本地渲染来启用按钮。我已经在应用程序的其他区域（这是一个项目的疯狂野兽）中进行了此操作，并且我们的可用性测试表明，用户至少能够识别当光标变为“帮助”时，他们可以将鼠标悬停在元素，并获取有关正在发生的情况的一些信息。

但这是我第一次尝试使用form元素。显然，当我在元素中添加disabled =“ disabled”时，它会完全忽略title属性，并且永远不会显示工具提示。

现在，我知道我有几个选择（至少我能想到的）：

1. 编写我自己的自定义工具提示插件，该插件更强大。
2. 不要“禁用”元素，而是将其设置为禁用。这是我最倾向于的选择（就易于开发而言），但我讨厌这样做。
3. 将按钮保留为启用状态，但不处理click事件。我不太喜欢此选项，因为我喜欢保留本来应该以逻辑方式显示的样式。禁用按钮“感觉”最正确，并且禁用按钮的外观可以立即识别为禁用按钮。

所以，话虽这么说，我是否错过了什么？有什么我能想到的容易做到的事情吗？Google搜索使我在这个主题上失败了，所以我认为我应该在StackOverflow上扔掉它，以便对此有所了解。

**编辑**

我只是在同一主题上发现了另一个StackOverflow问题，尽管该人使用一组非常不同的术语来描述他的问题（可能是为什么我没有找到它）。

问题的网址是：Firefox在禁用的输入字段上不显示工具提示

这个问题的两个答案都很好，尽管我想看看是否有人有其他建议。也许一些特定于jQuery的东西？再次感谢。

Answer 1

我有一个类似的问题，我只是将禁用元素包围在另一个元素中，并与该div交互，我正在使用tipTip来显示禁用复选框的工具提示

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

Answer 2

有几个非常强大的验证插件。您可以在 jQuery 插件区域找到它们。

我碰巧喜欢并且现在很流行的另一个选择是使用“Tipsy”插件。你可以加一点“？” 图标位于文本字段的右侧，人们可以将鼠标悬停在它们上方以获得“类似 facebook 的”工具提示。这个插件非常犀利，我强烈推荐它。

祝你好运！