Change enabled to disabled and disabled to enable the bootstrap with jquery

Question

How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked

HTML

<div class="col-md-2">
    <input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
    <button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>

JQUERY

$('#submit1').click(function() {
      $('#tes').prop("disabled",true);
    $(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});

My answer is generalized and can be useful in full website anywhere? — Mohit Tanwani
– Mohit Tanwani, Commented Aug 31, 2016 at 16:33

Mohit Tanwani · Accepted Answer · 2016-08-31 09:50:00Z

1

Use this Generalized function in your project to make things enabled / disabled.

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);
$('#submit1').click(function() {
    $('#tes').toggleDisabled();
    $(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
    <input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
    <button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>

answered Aug 31, 2016 at 9:50

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

irwan dwiyanto Over a year ago

This is very nice as I expected ... thank you very much

Vijay Maheriya · Accepted Answer · 2016-08-31 09:49:25Z

0

You can use this one.

$('#submit1').click(function() {
      $('#tes').prop("disabled",!$('#tes').prop("disabled"));
    $(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
    <input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
    <button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>

answered Aug 31, 2016 at 9:49

Vijay Maheriya

1,67916 silver badges21 bronze badges

1 Comment

irwan dwiyanto Over a year ago

thanks @Vijay Maheriya, Your answer is also true and more simple

Hugo Buff · Accepted Answer · 2016-08-31 09:49:46Z

0

.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.

if( $('#tes').prop("disabled") )
    $('#tes').prop("disabled",false);
else
    $('#tes').prop("disabled",true);

You could reduce this to:

$('#tes').prop("disabled", !$('#tes').prop("disabled") )

This fetches the current value of the property, negates it with !, then sets that as the new value

answered Aug 31, 2016 at 9:49

Hugo Buff

4215 silver badges16 bronze badges

Comments

Don Bhrayan Singh · Accepted Answer · 2016-08-31 09:51:28Z

0

If what you want is to toggle the disable prop:

$('#submit1').click(function() {
      $('#tes').prop("disabled", !$('#tes').prop("disabled"));
});

answered Aug 31, 2016 at 9:51

Don Bhrayan Singh

4854 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change enabled to disabled and disabled to enable the bootstrap with jquery

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related