Enable and disable textbox using jQuery




  • We can disable or enable controls using jQuery.
  • We need to use jQuery selectors to select an element to disable and by setting the disabled preperty we can achieve the disabling of an element.


Example :

<html>
<head>
<script type="text/javascript">
    $(document).ready(function () {
        $('#enable').click(function () {
            $('#textBox').removeAttr("disabled")
        });
        $('#disable').click(function () {
            $('#textBox').attr("disabled", "disabled");
        });
    });
</script>
</head>
<body>
<input type="text" id="textBox" />
<button id="enable">Enable</button>
<button id="disable">Disable</button>
</body>
</html>

Demo :




In the above example, on click of disable button, we are selecting the textbox element using id selector, then using attr() method we are setting its disabled property. On click of enable button we are removing the disabled property using removeAttr() method and textbox is back to enable state again.


We can also use following syntax : 

$('#textBox').attr("disabled",true);


More interesting jQuery codes

Read XML file using jQuery
Prevent cut copy paste on textbox using jQuery
Disable right click using jQuery
Detecting browser using jQuery
Tips for optimizing jQuery
Document ready handler in jQuery
Apply Style to alternate TR element using jQuery
Append text to elements using jQuery
Apply CSS to controls using jQuery
Enable Disable textbox using jQuery

0 comments:

Post a Comment