Merge pull request #6427 from edx/will/ecom-849

Use disabled property to prevent IE9 users from clicking disabled buttons

lms/static/js/spec/verify_student/make_payment_step_view_spec.js

@@ -78,7 +78,10 @@ define([
             };
 
             var expectPaymentButtonEnabled = function( isEnabled ) {
-                var isDisabled = $( '#pay_button' ).hasClass('is-disabled');
+                var appearsDisabled = $( '#pay_button' ).hasClass( 'is-disabled' ),
+                    isDisabled = $( '#pay_button' ).prop( 'disabled' );
+
+                expect( !appearsDisabled ).toEqual( isEnabled );
                 expect( !isDisabled ).toEqual( isEnabled );
             };
 
@@ -92,6 +95,7 @@ define([
                 // Activate button should be displayed and disabled
                 expect( activateButton.length ).toEqual(1);
                 expect( activateButton.hasClass( 'is-disabled' ) ).toBe( true );
+                expect( activateButton.prop( 'disabled' ) ).toBe( true );
             };
 
             var goToPayment = function( requests, kwargs ) {

lms/static/js/spec/verify_student/review_photos_step_view_spec.js

@@ -54,7 +54,10 @@ define([
             };
 
             var expectSubmitEnabled = function( isEnabled ) {
-                var isDisabled = $('#next_step_button').hasClass('is-disabled');
+                var appearsDisabled = $( '#next_step_button' ).hasClass( 'is-disabled' ),
+                    isDisabled = $( '#next_step_button' ).prop( 'disabled' );
+
+                expect( !appearsDisabled ).toBe( isEnabled );
                 expect( !isDisabled ).toBe( isEnabled );
             };
 

lms/static/js/spec/verify_student/webcam_photo_view_spec.js

@@ -73,7 +73,10 @@ define([
             };
 
             var expectSubmitEnabled = function( isEnabled ) {
-                var isDisabled = $( '#submit_button' ).hasClass( 'is-disabled' );
+                var appearsDisabled = $( '#submit_button' ).hasClass( 'is-disabled' ),
+                    isDisabled = $( '#submit_button' ).prop( 'disabled' );
+
+                expect( !appearsDisabled ).toEqual( isEnabled );
                 expect( !isDisabled ).toEqual( isEnabled );
             };
 
@@ -82,7 +85,7 @@ define([
 
                 setFixtures(
                     '<div id="current-step-container"></div>' +
-                    '<input type="button" id="submit_button" class="is-disabled"></input>'
+                    '<input type="button" id="submit_button"></input>'
                 );
                 TemplateHelpers.installTemplate( 'templates/verify_student/webcam_photo' );
             });

lms/static/js/verify_student/views/make_payment_step_view.js

@@ -35,6 +35,14 @@ var edx = edx || {};
             // Track a virtual pageview, for easy funnel reconstruction.
             window.analytics.page( 'payment', this.templateName );
 
+            // Set the payment button to disabled by default
+            this.setPaymentEnabled( false );
+
+            // The activate button is always disabled
+            $( '#activate_button' )
+                .addClass( 'is-disabled' )
+                .prop( 'disabled', true );
+
             // Update the contribution amount with the amount the user
             // selected in a previous screen.
             if ( templateContext.contributionAmount ) {
@@ -70,8 +78,9 @@ var edx = edx || {};
             if ( _.isUndefined( isEnabled ) ) {
                 isEnabled = true;
             }
-
-            $( '#pay_button' ).toggleClass( 'is-disabled', !isEnabled );
+            $( '#pay_button' )
+                .toggleClass( 'is-disabled', !isEnabled )
+                .prop( 'disabled', !isEnabled );
         },
 
         createOrder: function() {
@@ -143,7 +152,7 @@ var edx = edx || {};
             });
 
             // Re-enable the button so the user can re-try
-            $( '#pay_button' ).removeClass( 'is-disabled' );
+            this.setPaymentEnabled( true );
         },
 
         getPaymentAmount: function() {

lms/static/js/verify_student/views/review_photos_step_view.js

@@ -50,7 +50,7 @@ var edx = edx || {};
             var fullName = $( '#new-name' ).val();
 
             // Disable the submit button to prevent duplicate submissions
-            $( '#next_step_button' ).addClass( 'is-disabled' );
+            this.setSubmitButtonEnabled( false );
 
             // On success, move on to the next step
             this.listenToOnce( this.model, 'sync', _.bind( this.nextStep, this ) );
@@ -69,7 +69,7 @@ var edx = edx || {};
             var errorMsg = gettext( 'An unexpected error occurred. Please try again later.' );
 
             // Re-enable the submit button to allow the user to retry
-            $( '#next_step_button' ).removeClass( 'is-disabled' );
+            this.setSubmitButtonEnabled( true );
 
             if ( xhr.status === 400 ) {
                 errorMsg = xhr.responseText;
@@ -91,6 +91,12 @@ var edx = edx || {};
             title = $( this ).parent();
             title.toggleClass( 'is-expanded' );
             title.attr( 'aria-expanded', !title.attr( 'aria-expanded' ) );
+        },
+
+        setSubmitButtonEnabled: function( isEnabled ) {
+            $( '#next_step_button' )
+                .toggleClass( 'is-disabled', !isEnabled )
+                .prop( 'disabled', !isEnabled );
         }
     });
 

lms/static/js/verify_student/views/webcam_photo_view.js

@@ -231,6 +231,9 @@
         render: function() {
             var renderedHtml;
 
+            // Set the submit button to disabled by default
+            this.setSubmitButtonEnabled( false );
+
             // Load the template for the webcam into the DOM
             renderedHtml = _.template( $( this.template ).html(), {} );
             $( this.el ).html( renderedHtml );
@@ -258,7 +261,7 @@
 
         reset: function() {
             // Disable the submit button
-            $( this.submitButton ).addClass( "is-disabled" );
+            this.setSubmitButtonEnabled( false );
 
             // Reset the video capture
             this.backend.reset();
@@ -288,7 +291,7 @@
                 this.model.set( this.modelAttribute, this.backend.getImageData() );
 
                 // Enable the submit button
-                $( this.submitButton ).removeClass( "is-disabled" );
+                this.setSubmitButtonEnabled( true );
             }
         },
 
@@ -305,6 +308,12 @@
                     shown: true
                 });
             }
+        },
+
+        setSubmitButtonEnabled: function( isEnabled ) {
+            $( this.submitButton )
+                .toggleClass( 'is-disabled', !isEnabled )
+                .prop( 'disabled', !isEnabled );
         }
     });