1

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

2 に答える 2

2

ボタンを jQuery UI ボタン​​に変更するときは、DOMElement 属性を直接変更するのではなく、Button プラグインの jQuery UI メソッドを使用してボタンを有効/無効にすることをお勧めしますdisabled。

  1. 初期状態では、Button を初期化してからdisabled属性のみを変更するため、変更は Button プラグインによって考慮されます。

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

    また

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

  2. 2 番目の問題については、ボタンのオプション セッターを使用してボタンを再度有効にします。

    $( 'input[type="submit"]' ).button('option', 'disabled', false);
于 2012-05-24T05:47:36.077 に答える