Question

我有一个按钮：

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

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

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

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

被称为按钮处于活动状态（您可以单击它们）但仍显示为已禁用。我可以像在IE上一样在Chrome上使用吗？

＆＃13;

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

＆＃13;

//add some css code here

＆＃13;

 <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>

＆＃13;

Answer 1

我有一个按钮

不，你没有。你有一个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>

Answer 2

你应该创建一个按钮......你拥有的不是一个按钮，它是一个伪装成按钮的跨度。但只有按钮的禁用属性才能正常工作。

<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 3

由于您使用的是span而不是button，因此您不能指望它对disabled等随机属性的更改做出可靠的反应，span不应该有这种行为。

如果您真的想使用disabled，则可以通过添加/删除span属性来实现所需：

document.getElementById("moveBtn").removeAttribute('disabled')

但是，您最好将HTML更改为使用按钮，在样式方面它不会改变任何内容，因为Bootstrap定义了btn样式与您使用的标记无关。

Answer 4

span元素没有已禁用属性。

试试这个，

document.getElementById("moveBtn").style.pointerEvents = "none";//to disable span

document.getElementById("moveBtn").style.pointerEvents = "all";//to enable span

Answer 5

你可以创建一个按钮来实现你正在做的任何事情，或者你可以在span上或点击span上取消绑定click事件，只需写下return false;

Answer 6

试试这个

<html>
<title></title>
<head>
   <style>
      btn.disable{"opacity": 0.6;"cursor": inherit;}
   </style>
</head>
<body>
    <span 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></span>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
          $('#moveBtn').click(function(){
             $(this).toggleClass('disable');
          });
       });
    </script>
</body>
</html>

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

6 个答案: