Disable form Submit button inside a modal bootstrap window

Question

I have tried several ways to disable the Submit button of a form that is inside a modal bootstrap window, but I was unsuccessful. I have already researched the documentation but I have not found it. Someone can give me a light ?

Look at some of the ways I’ve tried to do:

$('#cxEditaEvento').find('button').prop('disable',true);

$('#cxEditaEvento button:contains('Salvar')').prop('disable',true);

The modal box I use is defined like this (I put only a few fields pro code not get too extensive):

<div class="modal fade" id="cxEditaEvento" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title text-left" id="myModalLabel">Dados do Evento</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="formEditaEvento" id="formEditaEvento" name="formEditaEvento" method="POST" action="saveEvento.php">
                    <fieldset>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="showID">ID</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="showID" id="showID" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="complemento">Descrição</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="complemento" id="complemento" placeholder="Complemento sobre o evento" value="" />
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" name="enviar" value="enviar" class="btn btn-primary btn-large pull-left">Salvar</button>
                    </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

Answer 1

The problem is the name of the property disabled.

instead of

$('#cxEditaEvento').find('button').prop('disable',true);

$('#cxEditaEvento button:contains('Salvar')').prop('disable',true);

trial:

$('#cxEditaEvento').find('button').prop('disabled',true);
                                                ^

$('#cxEditaEvento button:contains('Salvar')').prop('disabled',true);
                                                           ^

Answer 2

Hello instead of using the 'disable' property you should actually use 'disabled' with d at the end.

Use this and select the right button and disable it.

$('button:contains("Salvar")').prop('disabled',true);

Remembering that $('#cxEditaEvento').find('button').prop('disabled',true); will disable all buttons and not just the button that contains "Save"

Here’s an example of how it looks on https://jsfiddle.net/7v06n73o/1/