Chrome 上的 Javascript <span> 按钮启用/禁用

Question

我有一个按钮:

默认情况下禁用它，我以编程方式启用/禁用它

document.getElementById("moveBtn").disabled = true;
document.getElementById("moveBtn").disabled = false;

在 IE11 上运行完美，但在 Chrome 上运行

document.getElementById("moveBtn").disabled = false;

称为按钮处于事件状态(您可以单击它们)，但仍显示为禁用状态。我可以让它像在 IE 上一样在 Chrome 上运行吗？

document.getElementById("moveBtn").disabled = true;

//add some css code here

 <button id="moveBtn" class="btn btn-default" data-toggle="modal" data-target="#myModalM" disabled><span data-toggle="tooltip" title="Move"><i class="fa fa-arrows"></i></span></button>

Answer 1

I have a button

不，你不知道。你有一个span 。 span elements没有disabled属性，因为它们不是交互式元素:

console.log("disabled" in document.createElement("span")); // false

使用实际按钮(例如 <button type="button">...</button> )，您可以根据自己的喜好设置样式(看起来您正在使用 Bootstrap，它已经为您设置了样式):

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" id="moveBtn" class="btn btn-default" data-toggle="modal" data-target="#myModalM" disabled><span data-toggle="tooltip" title="Move"><i class="fa fa-arrows"></i></span></button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>