1️⃣ Basic Checkbox (چک‌باکس ساده)

• کلاس‌ها:

  • form-check → بلوک چک‌باکس

  • form-check-input → خود چک‌باکس

  • form-check-label → متن چک‌باکس

<div class="form-check mb-2">
  <input class="form-check-input" type="checkbox" value="" id="check1">
  <label class="form-check-label" for="check1">
    چک‌باکس ۱
  </label>
</div>

<div class="form-check mb-2">
  <input class="form-check-input" type="checkbox" value="" id="check2">
  <label class="form-check-label" for="check2">
    چک‌باکس ۲
  </label>
</div>

2️⃣ Disabled Checkbox (چک‌باکس غیر فعال)

<div class="form-check mb-2">
  <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
  <label class="form-check-label" for="checkDisabled">
    غیر فعال
  </label>
</div>

• غیر فعال با disabled

• کاربر نمی‌تواند آن را تغییر دهد

3️⃣ Inline Checkboxes (چک‌باکس در یک خط)

• کلاس form-check-inline

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheck1">
  <label class="form-check-label" for="inlineCheck1">گزینه ۱</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheck2">
  <label class="form-check-label" for="inlineCheck2">گزینه ۲</label>
</div>

4️⃣ Basic Radio Buttons (رادیو باتن ساده)

• همانند چک‌باکس، اما فقط یک گزینه در گروه می‌تواند انتخاب شود

• کلاس‌ها: form-check, form-check-input, form-check-label

<div class="form-check mb-2">
  <input class="form-check-input" type="radio" name="radioGroup" id="radio1" checked>
  <label class="form-check-label" for="radio1">رادیو ۱</label>
</div>

<div class="form-check mb-2">
  <input class="form-check-input" type="radio" name="radioGroup" id="radio2">
  <label class="form-check-label" for="radio2">رادیو ۲</label>
</div>

5️⃣ Disabled Radio Buttons (رادیو غیر فعال)

<div class="form-check mb-2">
  <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
  <label class="form-check-label" for="radioDisabled">غیر فعال</label>
</div>

6️⃣ Inline Radio Buttons

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio1">
  <label class="form-check-label" for="inlineRadio1">گزینه ۱</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio2">
  <label class="form-check-label" for="inlineRadio2">گزینه ۲</label>
</div>

7️⃣ Validation

• می‌توان چک‌باکس یا رادیو را اجباری کرد و با کلاس‌های Bootstrap اعتبارسنجی نمایش داد

<form class="needs-validation" novalidate>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="acceptTerms" required>
    <label class="form-check-label" for="acceptTerms">
      من شرایط را می‌پذیرم
    </label>
    <div class="invalid-feedback">
      باید این گزینه را انتخاب کنید.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">ارسال</button>
</form>

✅ نکات مهم

• چک‌باکس‌ها و رادیوها با کلاس‌های form-check ساده و زیبا می‌شوند.

• می‌توان از form-check-inline برای نمایش در یک خط استفاده کرد.

• غیر فعال کردن با disabled و اجباری کردن با required ساده است.

• اعتبارسنجی داخلی Bootstrap بدون نیاز به JS اضافی قابل استفاده است.