غیرفعال کردن دکمه پس از کلیک با استفاده از JavaScript و JQuery

در این مقاله نحوه غیر فعال کردن دکمه پس از کلیک با استفاده از دستورات JavaScript و JQuery شرح می دهیم .

غیرفعال کردن دکمه پس از کلیک با استفاده از JavaScript و JQuery

برای غیر فعال کردن دکمه پس از کلیک باید اسکریپت مورد نظر را در صفحه قرار دهیم .

رویداد  onbeforeunload  قبل از اینکه صفحه Load شود اجرا می شود .زمانی که صفحه به سرور هدایت شود .

برای این کار ابتدا تگ های HTML که شامل یک HTML Button و HTML Submit Button هستند را به صفحه اضافه میکنیم .زمانیکه دکمه Submit کلیک شد رویداد onbeforeunload  اجرا میشود .

همچنین رویداد onbeforeunload  یک حلقه را که  تمام input هایی که از جنس button یا submit باشند را غیر فعال میکند .

کد javascript :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="http://www.aspsnippets.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript">
        window.onbeforeunload = function () {
            var inputs = document.getElementsByTagName("INPUT");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "button" || inputs[i].type == "submit") {
                    inputs[i].disabled = true;
                }
            }
        };
    </script>
    </form>
</body>
</html>

همچنین تگ HTML زیر را به بدنه صفحه اضافه میکنیم :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="http://www.aspsnippets.com/">
    <input type="button" id="btn" value="Button" />
    <input type="submit" id="btnSubmit" value="Submit" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).on('beforeunload', function () {
            $("input[type=submit], input[type=button]").prop("disabled", "disabled");
        });
    </script>
    </form>
</body>
</html>

 

فایل های ضمیمه