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');
    }
});

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

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

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

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

那么，说了这么多，我是不是错过了什么？有没有什么简单的事情是我可以做但我没有想到的？谷歌搜索在这个主题上让我失败了，所以我想我应该把这个扔到 StackOverflow 上以获得一些新的视角。

**编辑**

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

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

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

Answer 1

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

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

祝你好运！

Answer 2

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

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

Answer 3

我还没有测试这是否可以解决缺少标题的问题，但您也可以使用 jquery 禁用按钮 $(document).ready()

问候 哈帕克斯

Answer 4

如果这没有完全破坏您的设计，您可以用“span”、“p”等替换按钮。标记为“这里是我的‘有用’文字。”

仅当用户做出正确的动作时才将其与按钮交换。