Jquery: Disable / Enable button does not work after reset

Question

I have a form with n multiple choice questions that are used as radio buttons (using jquery-ui ). I would like to make sure that all questions have been answered before allowing the user to submit the form. When performing this check, I encounter two problems:

• At the initial loading, the submit button does not respond to clicks or overlays until all questions are selected at will. However, it still seems clickable (I would like it to be paid off)

• If the reset button is pressed, the submit button disappears (optional), but I cannot re-enable the submit button after the form is completed.

This is my first time using javascipt / jquery. What is going wrong? How to achieve the desired functionality in both cases?

---

Here is the relevant part of javascript:

 $(document).ready(function(){ $( '.button' ).button (); $( '.radio-set' ).buttonset (); $( 'input[type="submit"]' ).attr( 'disabled', true ); var progress = 0; var total_fields = $('.response').length /* Track Progress function*/ $('input[type="radio"]').click( function(){ progress = $('input[type="radio"]:checked').length $(".progressbar").progressbar( {value: ( progress / total_fields ) * 100} ) console.log(progress, total_fields) if( progress == total_fields ){ console.log( "Hello from inside the conditional" ) $( 'input[type="submit"]' ).removeAttr( 'disabled' ); } }); $( 'input[type="reset"]' ).click( function(){ progress = 0 $( ".progressbar" ).progressbar( {value: 0} ) $( 'input[type="submit"]' ).attr( 'disabled', true ); }); }); 

An example of one of the questions in the form (with the text of the bacon filler):

  <div class="model_feature"> <span class="feature_name" title="M1">M1</span> <span class="response radio-set"> <label for="M1-1">1</label> <input type="radio" name="M1" id="M1-1" value="1" class="feature-input" autocomplete="off" /> <label for="M1-0">0</label> <input type="radio" name="M1" id="M1-0" value="0" class="feature-input" autocomplete="off" /> <label for="M1-Unk">Unknown</label> <input type="radio" name="M1" id="M1-Unk" value="Unknown" class="feature-input" autocomplete="off" /> </span <!-- close response --> <span class="feature_description">Chicken spare ribs capicola beef brisket hamburger. Kielbasa filet mignon tail ribeye ball tip ground round.</span> </div> <!-- close model_feature --> 

Input and reset buttons for completeness:

  <input type="reset" class="button" id="reset-button" /> <input type="submit" class="button" id="submit-button" disabled="disabled" /> 

Answer 1

As you turn the button on the jQuery UI Button, you better use the jQuery UI methods of the Button plugin to enable / disable your button instead of directly changing the DOMElement disabled attribute.

• For the initial state, you initialize your button, and then change only the disabled attribute, so the change is taken into account by the Button plugin.

   // either disable first the button then initialize $( 'input[type="submit"]' ).attr( 'disabled', true ); $( '.button' ).button (); 

  or

   // set the Button option $( '.button' ).button (); $( 'input[type="submit"]' ).button('option', 'disabled', true); 

• For the second problem, use the button settings option to re-enable your button:

   $( 'input[type="submit"]' ).button('option', 'disabled', false); 

Answer 2

I solved the problem by waiting a while before adding the disabled attribute. Example,

 var btn = $("button").first(); $(btn).button("loading"); $(btn).button("reset"); setTimeout(function () { $(btn).prop("disabled", true); }, 0); 

Same as question here and gihub problem here .