Disable and change color of submit button in jQuer

2019-09-11 12:20发布

问题:

I've looked at similar questions but no solutions have worked so far. I'm using a jQuery Steps form and I'm trying to disable the submit button on click and also change the appearance. I've tried using:

$('finish').attr('disabled',true);

But that hasn't worked. When I click the button, it doesn't disable the button or change the appearance. When I click twice, it sends me two emails with the test form.

EDIT: I am not trying to remove an "input," I'm trying to remove a "submit" button, which the jQuery documentation lists as "finish".

My full JS is below.

$(function(){
            $("#smart-form").steps({
                bodyTag: "fieldset",
                headerTag: "h2",
                bodyTag: "fieldset",
                transitionEffect: "fade",
                titleTemplate: "<span class='number'>#index#</span> #title#",
                labels: {
                    finish: "Submit Form",
                    next: "Continue",
                    previous: "Go Back",
                    loading: "Loading..." 
                },
                onStepChanging: function (event, currentIndex, newIndex){
                    if (currentIndex > newIndex){return true; }
                    var form = $(this);
                    if (currentIndex < newIndex){}
                    return form.valid();
                },
                onStepChanged: function (event, currentIndex, priorIndex){
                },
                onFinishing: function (event, currentIndex){
                    var form = $(this);
                    $('finish').attr('disabled',true);
                    form.validate().settings.ignore = ":disabled";
                    return form.valid();


                },
                onFinished: function (event, currentIndex){
                    var form = $(this);
                             $(form).ajaxSubmit({
                        target:'.result',              
                        beforeSubmit:function(){ 
                            //$('.form-footer').addClass('progress');
                        },
                        error:function(){
                            //$('.form-footer').removeClass('progress');
                        },
                        success:function(){
                            $('.alert-success').show().delay(10000).fadeOut();
                            //$("#wizard").steps('done');
                            //$("#smart-form").steps('reset');
                            //setCurrentIndex();
                            //startIndex: 0
                            //reset();
                            /*$('.form-footer').removeClass('progress');
                            $('.alert-success').show().delay(10000).fadeOut();
                            $('.field').removeClass("state-error, state-success");
                            if( $('.alert-error').length == 0){
                            $('#smart-form').resetForm();
                            reloadCaptcha();
                            }*/
                        }
                })
                }

回答1:

Try this...

//Applying colour for finish button
var result = $('ul[aria-label=Pagination]').children().find('a');
$(result).each(function ()  { 
   if ($(this).text() == 'Finish') {
       $(this).attr('disabled', true);
       $(this).css('background', 'green');
   } 
});