Disable and Enable submit button in jquery

css, html, jquery, yii

Solution

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>

Problem

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

Original source

Related problems