jquery: Disable/Enable button not working after reset

Question

I have a form with n multiple choice questions implemented as radio buttons (using jquery-ui). I would like to ensure that all the questions have been answered before allowing the user to submit the form. I am running into two issues while performing this validation:

On initial load, the submit button does not respond to clicks or mouseovers until all questions have a response selected as desired. However, it still appears to be clickable (I would like this to be faded out)

enter image description here

If the reset button is pressed, the submit button is faded out (as desired) but I am unable to re-enable the submit button once the form has been completed.

enter image description here

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

Here is the pertinent javascript portion:

$(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 );
    });
});

Example of one of the questions within the form (with bacon filler text):

        <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" />

Didier Ghys · Accepted Answer · 2012-05-24 05:47:36Z

2

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

For the initial state, you initialize your Button and then only change 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's option
$( '.button' ).button ();
$( 'input[type="submit"]' ).button('option', 'disabled', true);

For the second problem, use the Button's option setter to re-enable your button:
```
$( 'input[type="submit"]' ).button('option', 'disabled', false);
```

answered May 24, 2012 at 5:47

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

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

Comments

Georgios · Accepted Answer · 2017-05-25 19:53:58Z

1

I solved the issue by waiting for 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);

A same so question here and a gihub issue here.

answered May 25, 2017 at 19:53

Georgios

20.2k9 gold badges99 silver badges100 bronze badges

Collectives™ on Stack Overflow

jquery: Disable/Enable button not working after reset

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related