Disable and Enable submit button in jquery

Question

I am using jquery to disable the submit button and load loading image,

In submit button I am using the folowing :

<div id="registerbtn" name="registerbtn">
<input type="submit" class="btn btn-primary" icon="ok white" value="Register" id="register" name="register"/>
</div>
<div class="span4" style="display:none;" id="loadingtext">
                            <?php echo  $imghtml=CHtml::image('images/loading.gif');?>                      
                        </div>

and in JQuery, I am using following code :

$(document).ready(function() {

    $('#register').click(function() {
        $('input[type="submit"]').attr('disabled','disabled');

     });
        $("#loadingtext").show();
    });
});

When I do this, then this button is disabled permanently, but if I want to remove then what should I do ??

I am using yii to submit this form, when this form is submitted then it is validated, at this time i want to disable this button, if there are errors then I want to enable otherwise, proceed to next view — Rohitashv Singhal, Jan 05 '13 at 10:24
Possible duplicates: http://stackoverflow.com/questions/1785071/jquery-remove-attribute http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button?rq=1 — Stefan Neubert, Jan 05 '13 at 10:24

Roko C. Buljan · Accepted Answer · 2017-10-17T08:05:55.973

17

Use .prop() method and use the $(this) to reference the target element within the callback function

jQuery(function($) {

  const $register = $("#register"),
        $loading = $("#loading");

  $register.on("click", function() {
  
    $(this).prop('disabled', true);
    $loading.show();
    
    setTimeout(function() {
      $register.prop('disabled', false);
      $loading.hide();
    }, 2000);

  });

});

<input id="register" value="Register" type="submit">
<div id="loading" style="display:none;">Wait 2 sec...</div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

edited Oct 17 '17 at 08:05

answered Jan 05 '13 at 10:32

Roko C. Buljan

196,159
39
305
313

@lord_linus it's not exactly the way you need it but there are all the tips you need! thx! happy coding – Roko C. Buljan Jan 05 '13 at 10:34
one more problem, I am getting that by using this, I am not able to submit the data, – Rohitashv Singhal Jan 05 '13 at 10:36
@lord_linus sorry was away, you fixed that issue? – Roko C. Buljan Jan 05 '13 at 10:58
,I just fixed the issue but not in the proper way, it was just for work , this is my script` $('#register').click(function() { $("#registerbtn").hide(); $("#loadingtext").show(); });`and this is my div `

` – Rohitashv Singhal Jan 07 '13 at 11:40

score 10 · Answer 2 · edited Jun 12 '15 at 09:53

This is answered in the jQuery FAQ

How do I disable/enable a form element?
There are two ways to disable/enable form elements.

Set the 'disabled' attribute to true or false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Add or remove the 'disabled' attribute:

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

Update: Now the way to do it (as said by FAQ) is only:

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

score 0 · Answer 3 · answered Jan 05 '13 at 10:22

0

To permanently remove the button

$('#register').remove();

To restore the button

$('#register').attr('disabled',false);

answered Jan 05 '13 at 10:22

PassKit

12,231
5
57
75

score 0 · Answer 4 · answered Jan 05 '13 at 10:22

0

Is $('#divID').remove(); what you're looking for?

http://docs.jquery.com/Manipulation/remove

answered Jan 05 '13 at 10:22

Ignacio Correia

3,611
8
39
68

actually I want to enable the button again if I am getting any error in the registration – Rohitashv Singhal Jan 05 '13 at 10:29

score 0 · Answer 5 · answered Aug 05 '20 at 09:54

0

Enable disabled properties

 $('#apply-coupon').removeAttr('Disabled');

Disable disabled properties

$('#apply-coupon').attr('disabled', 'disabled' );

answered Aug 05 '20 at 09:54

Mosam Prajapati

189
2
6

Disable and Enable submit button in jquery

5 Answers5

Enable disabled properties

Disable disabled properties