فعال کردن دکمه تایید بعد از پذیرش قوانین با جی کوئری

البته این عنوانی که گذاشتم خیلی مبتدیانه هست. صرفا واسه این گذاشتم که افراد تازه کار هم بتونن جستجوش کنن.

 

 

نمونه این کدها رو میتونین توی ثبت نام در انجمن ها مشاهده کنین. که یکسری قوانین سایت میاد و شما اگه اون قوانین رو قبول کنین دکمه ثبت نام فعال میشه.

 

خب  حالا ما میخوایم این کار رو با جی کوئری انجامش بدیم.

 

اول از همه کتابخانه جی کوئری رو از اینجا دانلود  (در آخر آموزش نیز پیوست شده) و در صفحه لود کنین.

 

اینطوری :

<script src="jquery-1.9.0.min.js"></script>

 

خوب حالا برین فرم مون رو بسازیم

 

<form>

    <p>

<input type="checkbox" name="terms" id="terms" />

    <label for="terms">قوانین را میپذیرم </label> 

    </p>

<p>

<input type="checkbox" name="not" id="not" />

<label>قوانین را نمی پذیرم </label>

</p>

    

    <p>

    <input type="button" id="send" value="ثبت نام" />

    </p>        

    </form>

 

 

توی این فرمی که فقط دو تا چیز ضروری هست : یکی چک باکس ، یکی هم دکمه ثبت نام . بقیه اضافه کاری هستش . (البته ممکنه اونجایی که دارین ازش استفاده میکنن ، ضروری باشه . توی این آموزش غیر ضروریه)

 

الان نوبت اصل کاری رسیده ، یعنی کار با جی کوئری

 

<script>

$(function(){

var button = $('#send');

button.attr('disabled' ,'disabled');

$('#terms').change(function(e) {

            if (this.checked){

button.removeAttr('disabled');

}else{

button.attr('disabled' ,'disabled');

}

        });

});

 

</script>

 

خب بریم سراغ توضیحاتش .

اول از تگ <script> : این که نیازی به توضیح نداره ، معلومه دیگه کدهای اسکریپت رو باید توی این تگ نوشت :D 

 

توی خط سوم id دکمه رو بهش میدیم.

توی خط چهارم بهش میگیم که دکمه در حالت عادی غیر فعال باشه.

توی خط پنجم الی  نهم :  میام id چک باکس رو بهش میدیم و میگیم که اگه روش تیک زد ، خاصیت غیرفعال بودن رو از دکمه حذف کن (یعنی دکمه رو فعالش کن) . در غیر اینصورت بزار همینطور غیرفعال بمونه.

 

دیدین چقدر آسون بود.

 

دانلود فایل نهایی (به همراه قالب (مانند تصویر) + کتابخانه جی کوئری)