HTML JAVASCRIPT JQUERY

[ Solved – 8 Answers] JQUERY – How to Disable enable an input with jQuery

How to Disable enable an input with jQuery

jQuery 1.6+

  • To change the disabled property we can use the .prop() function.
javascript code
$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5

  • The .prop() function doesn’t exist, but .attr() does similar:
  • To Set the disabled attribute.
javascript code
$("input").attr('disabled','disabled');
  • To enable again, the proper method is to use .removeAttr()
javascript code
$("input").removeAttr('disabled');

In any version of jQuery

  • We can always rely on the actual DOM object and is probably a little faster than the other two options if we are only dealing with one element:
javascript code
// assuming an event handler thus 'this'
this.disabled = true;
  • The advantage of using the .prop() or .attr() methods is that we can set the property for a bunch of selected items.

Note:

  • Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

  • We can enable or disable a form element using the .prop() method:
javascript code
// Disable #x
$( "#x" ).prop( "disabled", true );
 
// Enable #x
$( "#x" ).prop( "disabled", false );

javascript code
$(document).on('event_name', '#your_id', function() 
{
    $(this).removeAttr('disabled');
});
and

$(document).off('event_name', '#your_id', function() 
{
    $(this).attr('disabled','disabled');   
});

  • We can place this somewhere global in your code:
javascript code
$.prototype.enable = function () 
{
    $.each(this, function (index, el) 
{
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () 
{
    $.each(this, function (index, el) 
{
        $(el).attr('disabled', 'disabled');
    });
}

And then we can write things like:

javascript code
$(".myInputs").enable();
$("#otherInput").disable();

  • If we want to invert the current state (like a toggle button behavior):
javascript code
$("input").prop('disabled', ! $("input").prop('disabled') );

READ  [Solved -14 Answers] JAVASCRIPT - How to convert a string to boolean in JavaScript

In Jquery mobile:

For Disable

javascript code
    $('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
    $('#someTextElement').textinput().textinput('disable');

For Enable

javascript code
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
    $('#someTextElement').textinput('enable');

html code
<html>
<body>

Name: <input type="text" id="myText">
<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

  • Here is the solution for Disable or Enable Form Element in jQuery:
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Disable or Enable Form Element</title>
<style type="text/css">
    label
 {
        display: block;
        margin: 10px 0;
 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
        $('form input[type="submit"]').prop("disabled", true);
        $(".agree").click(function()
{
            if($(this).prop("checked") == true)
{
                $('form input[type="submit"]').prop("disabled", false);
 }
            else if($(this).prop("checked") == false)
{
                $('form input[type="submit"]').prop("disabled", true);
 }
 });
 });
</script>
</head>
<body>
    <form>
        <label>Name: <input type="text" name="username"></label>
        <label>Email: <input type="email" name="email"></label>
        <label><input type="checkbox" class="agree"> I agree to terms and conditions.</label>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

About the author

Wikitechy Editor

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X