Disable form submit button within a modal bootstrap window

Question:

I've tried in several ways to disable the submit button of a form that is inside a modal bootstrap window, but I wasn't successful. I've already searched the documentation but I couldn't find it. Can anyone give me a light ?

Here are some of the ways I tried to do it:

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

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

The modal box I use is set like this (I just put a few fields so the code doesn't get too long):

<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:

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

Use it like that and it will 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"

See an example of how it looks at https://jsfiddle.net/7v06n73o/1/

Scroll to Top