W016 - alex1221/bootlint-customization GitHub Wiki

W016

使用 .disabled 类在 <button><input> 上仅改变元素的外观。它不会阻止用户与元素进行交互(例如,单击它或将其聚焦)。如果您想真正禁用该元素,请改用 disabled 属性。

根据HTML规范,向<button><input>元素添加 disabled 属性可防止该元素接收交互事件(如点击或悬停)。例:

<button type="button" disabled onclick="alert('This JS will never get triggered');">
  This button is unclickable since it's disabled
</button>

点击该按钮不会显示警告对话框。

Bootstrap 禁用按钮的样式与启用的按钮不同,方法是“将它们灰显出来”,以便直观地指示其禁用状态。

Bootstrap还包含一个 .disabled CSS类(与HTML属性不同),它仅应用“灰色”样式,但不影响按钮的可点击性。例如:

<button type="button" class="disabled" onclick="alert('This JS can get triggered');">
  Clicking this button will show an alert dialog
</button>

点击该按钮会导致显示警告对话框,即使其视觉风格表明它已被禁用。

有些情况下您可能需要使用 .disabled CSS类而不是HTML disabled 属性。例如,您可能希望将悬停触发的 tooltip 添加到按钮,以解释其操作当前不可用/不适用的原因以及将重新启用它的操作。您可以通过将 .disabled 类应用于按钮,就像使用任何其他普通元素一样,并在按钮的click事件处理程序中添加一个检查 .disabled 类存在时忽略click事件。

但是,在 disabled 属性更合适的情况下,很容易意外地使用 .disabled 类,因此存在这种检查的原因。如果您了解类和属性之间的区别,并且有意和恰当地使用该类,则可以放心地忽略此警告。(这个检查是一个警告而不是错误,正是因为需要人为判断来确定是否正确使用了 .disabled类。)

还有一些额外的困惑,因为根据您的Bootstrap v3的确切版本,.btn.disabled 可能会存在pointer-events: none;,这个在按钮上还未标准化的样式。这种风格仅在一些较新的浏览器中得到支持,它具有防止按钮从鼠标设备接收事件的效果,因此粗略地近似了 disabled 属性的效果。但是,正如Bootstrap v3的文档中所述,这不应该依赖于它,因为Bootstrap v3支持的所有浏览器都不支持它,并且它不会阻止用户使用其他方法来“点击”按钮,用Tab按键得到按钮的焦点后,使用Enter键触发点击事件。

⚠️ **GitHub.com Fallback** ⚠️