jQuery - كيف يمكنني تمكين / تعطيل زر إرسال؟
استخدام jQuery لتمكين أو تعطيل زر له العديد من المزايا اعتمادا على تفاعل المستخدم. ستتمكن بسهولة من استخدام هذا الرمز مع تطبيقات jQuery الأخرى. هيا بنا نبدأ.بالنسبة للصبر ، يمكنك استخدام وظيفة prop () المتوافقة مع الإصدارات أدناه jQuery 1.6:
< pre class = "prettyprint lang-javascript" > $ ('.button') .prop ('معطل' ، صحيح) ؛ لتعطيل
$ ('.button') .prop ('معطل' ، خطأ) ؛ لتمكين < / pre> للآخرين الذين يرغبون في معرفة المزيد ورؤية وظائف أخرى لتعطيل الزر وتنشيطه ، أدعوك للقراءة على.
في تطوير الويب ، المشكلة الأكثر شيوعا هي النقر فوق زر الإرسال مرتين. في بعض الأحيان ينقر المستخدمون عدة مرات للتأكد من النقر فوق الزر ، ولكن هذا يتسبب في التحقق المزدوج.
إذا قمت بإنشاء نموذج HTML ، خاصة مع jQuery و Ajax ، فستحتاج إلى تعطيل زر الإرسال أثناء تحميل الصفحة عند النقر فوق الزر. لأنك لا تريد أن ينقر المستخدم على الزر نفسه مرة ثانية لأنه قد يؤدي إلى حدوث أخطاء. لذلك ، لمنع حدوث ذلك ، نحتاج إلى تعطيل زر الإرسال.
الحل هو تعطيل زر الإرسال بعد أن ينقر المستخدم عليه ، وعرض تحميل أو رسالة لإظهار المستخدم أن المعالجة تتقدم.
تعطيل زر الإرسال
لتعطيل زر الإرسال باستخدام jQuery ، تحتاج إلى تعطيل سمة الزر Submit.
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
< / pre> تمكين زر الإرسال < / h2 >لتمكين زر الإرسال المعطل ، قم بتغيير قيمة السمة "معطل" إلى false ، أو أزل السمة "معطل" .
$('input:submit').attr("معطل", خطأ) ؛
أو < br / $ > ('input: submit') .removeAttr ("معطل") ؛
تلعب الدالتان attr() وremoveAttr() نفس دور الدالة prop() ، باستثناء أنه تم دمجها في jQuery منذ الإصدار 1.6.
example < / h2>< / div>سنقوم بإنشاء نموذج HTML بسيط يحتوي على مدخلات وزر. هذا النموذج هو نموذج اتصال ويجب على المستخدم تحديد اسمه ولقبه وعنوان بريده الإلكتروني ورسالته. الفكرة هي عدم السماح للمستخدم بالنقر فوق الزر "إرسال" مرتين.
< / >< رئيس> < / > < / >< البرنامج النصي src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> < / >< / >< أسلوب>
الإدخال ، textarea {
الهامش السفلي: 10px ؛
}
< / style> < / >< / الرأس> < / >< / >< الجسم> < / >< إجراء النموذج = "" معرف = "نموذج" الطريقة = "POST"> < فرع / > الاسم: < فرع / >< معرف الإدخال = "الاسم" الاسم = "الاسم" النوع = "النص" / >
الاسم الأول:
< معرف الإدخال = "الاسم الأول" الاسم = "الاسم الأول" اكتب = "نص" / >
البريد الإلكتروني:
< معرف الإدخال = اسم "البريد الإلكتروني" = "البريد الإلكتروني" اكتب = "نص" / >
رسالة:
< أعمدة منطقة النص = "50" معرف = "رسالة" اسم = "رسالة" صفوف = "5" > < / >< / >< معرف الإدخال = "btn_envoyer" اكتب = "إرسال" القيمة = "إرسال" / > < / >< / شكل> < / >< السيناريو>
$ (وظيفة ()
{
$ ('#btn_envoyer').click (function ()
{
$ (this).attr ("معطل" ، "معطل") ؛
})؛
})؛
< / البرنامج النصي> < / >< / الجسم> < ر / >< ر / >< / أتش تي أم أل>
< / pre> إذا اختبرنا هذا الرمز على متصفح ويب ، فإنه يعطي النتيجة التالية:
< / a>< / div> بعد النقر ، تم تعطيل الزر "إرسال".