Disable form submit button inside a modal bootstrap window

Navigation
3

I have tried in several ways to disable the submit button of a form that is inside a modal bootstrap window, but I did not succeed. I already researched the documentation but tb I did not find it. Can someone 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 put only a few pro code fields that do not 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>
    
asked by anonymous 25.05.2016 / 21:49

2 answers

1

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"

See an example of how link

    
25.05.2016 / 22:42
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);

try: 

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

$('#cxEditaEvento button:contains('Salvar')').prop('disabled',true);
                                                           ^
    
25.05.2016 / 22:34
Best way to structure history table with large amount of data Implement the Filter Access Control - JSP