CODEWITHSUNDEEP
javascriptjqueryhtml
skr
skr

Reputation: 147

How to programmatically enable and disable a button using javascript

I want a button to be disabled initially. Once a condition is met, I want to enable the button. I tried the below and the button is not getting enabled.

<button class="search btn right-align search-button disabled" id="view-btn">
Hello
</button>

$('#submit_query').click(function(){
document.getElementById("myBtn").disabled = false; 

}

Upvotes: 1

Views: 2051

Answers (5)

Poulima Biswas
Poulima Biswas

Reputation: 167

<button class="search btn right-align search-button" disabled id="view_btn">
Hello
</button>

<button class="search btn right-align search-button"  id="submit_query">
click me
</button>

var myHTML = document.querySelector('#submit_query');
myHTML.onclick = function() {
console.log(1);
  document.getElementById("view_btn").disabled = false; 
};

relevant link : http://jsfiddle.net/765ogwf1/11/

Upvotes: 0

Yevgeny Kolesnik
Yevgeny Kolesnik

Reputation: 64

Make sure your #ids match your HTML button controls and that you are bringing in jQuery. Then to enable an element you want to do this:

$('#enable').click(function(){
  $("#view-btn").removeAttr("disabled"); 
});

and to disable:

$('#disable').click(function(){
  $("#view-btn").attr("disabled","true"); 
});

For working example: http://jsbin.com/xigeyixoji/edit?html,output

Upvotes: 1

G Cadogan
G Cadogan

Reputation: 182

In the code provided the id for the button element is "view-btn" however the JavaScript code is using getElementById using "myBtn".

Also, the button is assigned the 'disabled' class which may or may not actually disable the button. "disabled" is a separate attribute from class.

Additionally, the JavaScript is using jQuery to assign the click handler. The standard way to use jQuery to enable a control is: $("#view-btn").prop("disabled", false );

Upvotes: 0

Namig Ismayilov
Namig Ismayilov

Reputation: 121

Try this:

function myFunction() {
    document.getElementById("myBtn").disabled = false;
}
<html>
<body>

<button id="myBtn" disabled>My Button</button>

<p>Click the button below to disable the button above.</p>

<button onclick="myFunction()" >Try it</button>



</body>
</html>

Upvotes: 0

alanfcm
alanfcm

Reputation: 663

If you use jQuery is simpler:

$('#submit_query').click(function(){
$("#myBtn").attr("disabled","false"); 

});
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<button class="search btn right-align search-button disabled" id="myBtn">
Hello
</button>

<button id="submit_query">Submit</button>

Upvotes: 2

Related Questions