iOS Safari <button disabled></button> 没有禁用？

Question

我正在检查我在 iPad 上制作的表格，似乎将 disabled 添加到 <button> 标签实际上并没有禁用按钮。

将disabled 添加到<input> 标签有效，但不适用于<button>。

所以

<input type = "text" disabled />

有效，但是

<button disabled>Hola</button>

没有。关于解决此问题的方法的想法？还是只是一个 Safari 错误？

Answer 1

这个 iOS Safari 错误很可怕。 iPad 是否支持闪烁标签？据我所知，你真的不能像<button> 那样设计<input>。因此，如果您有一个<button> 和<span> 的样式或<img> 在button 旁边，<input> 不是要走的路。而是假装它，让你的按钮表现得像它具有“禁用”属性。

为您的按钮添加一个类：

<button class='ipad-disabled'></button>

然后检查该按钮是否具有'ipad-disabled'类，如果有，则单击该按钮时不会发生任何事情：

$('button').on('click', function () {
    if (!$(this).hasClass('ipad-disabled')) {
        doSomething(this);
    }
});

然后，当您需要启用 <button> 时，删除“ipad-disabled”类：

$('button').removeClass('ipad-disabled');

Answer 2

您可以在<input /> 标记上使用disabled 属性，但不能在<button /> 标记上使用。按钮没有正式贬值，但因为你可以这样做

<input type="submit" value="Click Me">

用于表单提交功能和

<input type="button" value="Click Me">

对于一个普通的普通按钮来说，拥有一个完全不同的标签并没有真正意义。此外，您可以通过添加 disabled 来禁用提交和常规按钮

<input type="submit" value="You can't Click Me" disabled>
<input type="button" value="Click Me" disabled>

Answer 3

我在我的家用 iPad 上检查了这个。你是对的，button 标签不起作用，但这些标签起作用：

<input type="button" value="Go on, click me!">

和

<input type="submit" value="Go on, click me!">

希望能解决您的问题。您可以使用<button></button> 执行任何操作，也可以使用<input type="button"> 或<input type="submit"> 执行任何操作。一定是 iOS Safari 的 bug。

编辑：

Button 在 Chrome 中确实接受 disabled，所以我将 Safari 归咎于 iOS。

编辑：

见Fiddle。