I have a button:

that by default is disabled and I enable/disable it programmatically

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

On IE11 works perfect but on Chrome when

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

is called the buttons are active (you can click on them) but still appear as disabled. Can I make it work also on Chrome like on IE?

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>

I have a button:

that by default is disabled and I enable/disable it programmatically

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

On IE11 works perfect but on Chrome when

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

is called the buttons are active (you can click on them) but still appear as disabled. Can I make it work also on Chrome like on IE?

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 25, 2017 at 9:39 Arash Khajelou 57033 silver badges1616 bronze badges asked Jul 25, 2017 at 9:15 LAffairLAffair 1,99866 gold badges3333 silver badges6464 bronze badges 4

• 3 "I have a button" No, you don't. You have a span. span elements have no disabled property, because they are not interactive elements. – T.J. Crowder Commented Jul 25, 2017 at 9:17
• Have you tried setting disable attribute using setAttribute()? – Rajesh Commented Jul 25, 2017 at 9:18
• it's span not a button, it's don't have any disable prperty – Death-is-the-real-truth Commented Jul 25, 2017 at 9:18
• IE implements disable attribute for the most of the elements, when other browsers don't. You have to emulate disabled state by adding suitable styling to span, and either create a flag the click handler detects, or detach the click event from the "button". – Teemu Commented Jul 25, 2017 at 9:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

I have a button

No, you don't. You have a span. span elements have no disabled property, because they are not interactive elements:

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

Use an actual button (e.g., <button type="button">...</button>), which you can style as you like (looks like you're using Bootstrap, which already styles them for you):

<link href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

You should create a button... What you have is not a button, it is a span disguised in a button. But only buttons have the disabled property correctly working everywhere.

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

Since you are using a span instead of button you can't expect it to react reliably to changes of random properties like disabled, span is not supposed to have this behaviour.

You can however achieve what you need by adding/removing disabled attribute if you really want to use span:

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

But, you would better change your HTML to use button, in terms of styling it will not change anything, since Bootstrap defines btn styles agnostic from tag you use.

span elements don't have disabled property.

Try this,

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

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

Either you can create a button to achieve whatever you are doing, or you can unbind click event on span or on clicking span, simply write return false;

Try this

<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./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
          $('#moveBtn').click(function(){
             $(this).toggleClass('disable');
             // or else you can use toggle method
             $(this).toggle()
          });
       });
    </script>
</body>
</html>