CODEWITHSUNDEEP
javascriptjqueryformsjquery-ui
bnjmn
bnjmn

Reputation: 4584

jquery: Disable/Enable button not working after reset

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:

enter image description here

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

Upvotes: 1

Views: 4197

Answers (2)

Georgios Syngouroglou
Georgios Syngouroglou

Reputation: 19944

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.

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

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.

  1. 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);

  2. For the second problem, use the Button's option setter to re-enable your button:

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

Upvotes: 2

Related Questions