Disable one button at a time jquery

Question

Gentlemen, I have a question in this part of my code:

I need to send a request and then disable the Ubmit button. The Jquery code that does this is already working, but when I use it for the second time, even changing the ID, it disables all buttons present on the page.

Does anyone have any tips on what to do?

     <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
                        Última atualização de <b>Locais</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar">

                        <input type="submit" id="local" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                        <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=local]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                                <ul class="list-group">
                    <li class="list-group-item list-group-item-success">
                        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
                        Última atualização de <b>Itens</b>
                    </li>

                    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar">

                        <input type="submit" id="itens" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                        <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=itens]").prop("disabled", "disabled");
                            });
                        </script>
                    </form>     

                    <div></form>
                        <li class="list-group-item list-group-item-success" align="right">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                    </li>


                </ul>
                        </div>

        <div class="col-md-6">
                        <ul class="list-group">
                <li class="list-group-item list-group-item-success">
                    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
                    Última atualização de <b>Agentes</b>
                </li>

                <form action="http://localhost/W-OS-PRO/index.php/agente/atualizar">

                    <input type="submit" id="agentes" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                    <script type="text/javascript">
                            $(window).on('beforeunload', function () {
                                $("input[id=agentes]").prop("disabled", "disabled");
                            });
                    </script>
                </form>     

                <div></form>
                    <li class="list-group-item list-group-item-success" align="right">
                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
                </li>


            </ul>
                </div>

Answer 1

I’d recommend you do it this way:

HTML:

 <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="1">
    <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">
    <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form> 

<form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="3">
    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block"    value="Atualizar base de dados" />
    </form>

jQuery:

$('.form').submit(function(){
   var id = $(this).data('id');
   $('#local_'+id).attr('desabled','desabled');
   return false;
});

note that I added only class="form" data-id="1" in the form and separated javascript from HTML, so you wouldn’t have to keep repeating javascript in the middle of HTML

$(window).on('beforeunload', function () {
      $(".........").prop("disabled", "disabled");
 });

and I noticed you’re loading the script <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> several times in HTML without need. You can load it in the head or footer of the site only once. Then your html code would look like this:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="seu-script.js"></script>
</head>
<div class="col-md-6">
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">
            <span class="badge"><b>Qua, 09 de Dez de 2015 02H:51M</b></span>
            Última atualização de <b>Locais</b>
        </li>
    <form action="http://localhost/W-OS-PRO/index.php/local/atualizar" class="form" data-id="2">

        <input type="submit" id="local_1" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
                <ul class="list-group">
    <li class="list-group-item list-group-item-success">
        <span class="badge"><b>Qua, 09 de Dez de 2015 02H:52M</b></span>
        Última atualização de <b>Itens</b>
    </li>

    <form action="http://localhost/W-OS-PRO/index.php/item/atualizar" class="form" data-id="2">

        <input type="submit" id="local_2" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
    </form>     

    <div></form>
        <li class="list-group-item list-group-item-success" align="right">
            <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
    </li>


</ul>
        </div>

<div class="col-md-6">
        <ul class="list-group">
<li class="list-group-item list-group-item-success">
    <span class="badge"><b>Qua, 09 de Dez de 2015 02H:44M</b></span>
    Última atualização de <b>Agentes</b>
</li>

<form action="http://localhost/W-OS-PRO/index.php/agente/atualizar" class="form" data-id="2">

    <input type="submit" id="local_3" class="btn btn-success btn-sm btn-block" value="Atualizar base de dados" />
</form>     

<div></form>
    <li class="list-group-item list-group-item-success" align="right">
        <span class="glyphicon glyphicon-time" aria-hidden="true"></span> Este processo pode levar alguns minutos.</div>
</li>


</ul>
</div>