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');
});

Answer 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> 

Answer 2

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> 

Answer 3

.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

Answer 4

If what you want is to toggle the disable prop:

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