Sunday, 15 August 2021

Enable and disable button control using jquery

 In this tutorial, we will see how to enable and disable button control using jquery.

Please follow below steps:-

1)Open notepad or any editor

2) Add three buttons. 

1)btnSave:-Button to enable or disable

2)btnEnable:-Button to enable btnSave

3)btnDisable:-Button to disable btnSave

 So, add html code as below and save code with name Demo.html.

jquery,Enable and disable button control using jquery

3)Add CDN link in head section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

4)Add script tag in head section to write jquery code.

5) Add following jquery code to enable and disable button.

jquery,Enable and disable button control using jquery
       
            Output in browser will look like :-

jquery,Enable and disable button control using jquery

  Full Code for this demo:-

<html><head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

$('#btnEnable').click(function(){

$('#btnSave').removeAttr("disabled");

});

$('#btnDisable').click(function(){

$('#btnSave').attr("disabled","disabled");

});

});

</script></head>

<body>

    <input type="button" value="Save" id="btnSave">

    <input type="button" value="Enable Button" id="btnEnable">

    <input type="button" value="Disable Button" id="btnDisable">

</body>

</html>

No comments:

Post a Comment