disabled အနုတ်လက္ခဏာဆောင်သော

disabled အနုတ်လက္ခဏာဆောင်သောသည် HTML ပုံစံ၏ အစိတ်အပိုင်းကို ပိတ်ပင်သည်၊ ဆိုလိုသည်မှာ ၎င်းကို အလုပ်မလုပ်စေခြင်းဖြစ်သည်။ တန်ဖိုးမပါသော အနုတ်လက္ခဏာဆောင်သော တစ်ခုဖြစ်သည်။

အစိတ်အပိုင်းများကို ပိတ်ပင်ခြင်းသည် ယေဘုယျအားဖြင့် အသုံးပြုသူအား တန်ဖိုးအချို့ကို ပြောင်းလဲခွင့်မပြုရန် လိုအပ်သောအခါ (ထိုတန်ဖိုးများကို ပုံစံအစိတ်အပိုင်းများ၏ ပုံစံဖြင့် အသုံးပြုသူအား ပြသရန်လိုအပ်သော်လည်း) ဖြစ်သည်။ အချို့အခါများတွင် အစိတ်အပိုင်းများကို JavaSctipt ကိုသုံး၍ ပိတ်ပင်ကြသည် (နှင့် ပိတ်ပင်ခြင်းကို ဖယ်ရှားကြသည်)။

အပြုအမူ

ခလုတ် (button သို့မဟုတ် input အနုတ်လက္ခဏာဆောင်သော type တန်ဖိုးများဖြစ်သော button, reset သို့မဟုတ် submit ဖြင့်) ပိတ်ပင်ခြင်းသည် ခလုတ်ကို နှိပ်၍မရနိုင်တော့ခြင်းကို ဆိုလိုသည်။ စာသားထည့်သွင်းရန် နေရာ (input သို့မဟုတ် textarea) အတွက်ဆိုလျှင် ထဲတွင် စာသားကို ပြောင်းလဲ၍မရနိုင်ပါ သို့မဟုတ် ကူးယူ၍မရနိုင်ပါ။ အမှန်ခြစ်အကွက်များ နှင့် ရေဒီယို များအတွက်ဆိုလျှင် သူတို့၏ အခြေအနေ (အမှန်ခြစ်ထားသည် သို့မဟုတ် မထားပါ) ကို ပြောင်းလဲ၍မရနိုင်ပါ။ ရွေးချယ်စရာစာရင်းများ select အတွက်ဆိုလျှင် ရွေးထားသော စာရင်းအချက်ကို ပြောင်းလဲ၍မရနိုင်ပါ။

ပိတ်ပင်ထားသော အစိတ်အပိုင်းသည် ပုံသေအားဖြင့် မီးခိုးရောင်နောက်ခံရှိသည်။ ၎င်းသည် Tab ခလုတ်ဖြင့် ရွှေ့ခြင်းတွင်လည်း ပါဝင်မည်မဟုတ်ပါ။

နမူနာ . ပိတ်ပင်ထားသော ခလုတ်

disabled အနုတ်လက္ခဏာဆောင်သောကို သုံး၍ ခလုတ်ကို ပိတ်ပင်ကြည့်ရအောင်။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော ခလုတ်၏ နမူနာကို ကြည့်ပါ (၎င်းကို နှိပ်ကြည့်ပါ)။

<button disabled>စာသား</button>
<button>စာသား</button>

နမူနာ . ပိတ်ပင်ထားသော အမှန်ခြစ်အကွက်

ယခု ပိတ်ပင်ထားသော အမှန်ခြစ်အကွက်ကို ကြည့်ရအောင်။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော အမှန်ခြစ်အကွက်၏ နမူနာကို ကြည့်ပါ။

<input type="checkbox" disabled>
<input type="checkbox">

နမူနာ . ပိတ်ပင်ပြီး အမှန်ခြစ်ထားသော အမှန်ခြစ်အကွက်

checked အနုတ်လက္ခဏာဆောင်သောကို သုံး၍ ပိတ်ပင်ထားပြီး အမှန်ခြစ်ထားသော အမှန်ခြစ်အကွက်ကို ကြည့်ရအောင်။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော အမှန်ခြစ်ထားသော အမှန်ခြစ်အကွက်၏ နမူနာကို ကြည့်ပါ။

<input type="checkbox" disabled checked>
<input type="checkbox" checked>

နမူနာ . ပိတ်ပင်ထားသော စာသားထည့်သွင်းရန် အင်ပါ့

ယခု အင်ပါ့ကို ပိတ်ပင်ကြည့်ရအောင်။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော အင်ပါ့၏ နမူနာကို ကြည့်ပါ။

<input type="text" value="စာသား" disabled>
<input type="text" value="စာသား">

နမူနာ . ပိတ်ပင်ထားသော တက်စ်အေရီးယား

ဤနေရာတွင် ပိတ်ပင်ထားသော တက်စ်အေရီးယားကို တွေ့မြင်ရမည် (ပိတ်ပင်ထားသော textarea ၏ အရွယ်အစားကို ပြောင်းလဲနိုင်သည်ကို သတိပြုပါ)။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော တက်စ်အေရီးယား၏ နမူနာကို ကြည့်ပါ။

<textarea disabled>စာသား</textarea>
<textarea>စာသား</textarea>

နမူနာ . ပိတ်ပင်ထားသော ရွေးချယ်စရာစာရင်း

ပိတ်ပင်ထားသော select မည်သို့အလုပ်လုပ်သည်ကို ကြည့်ရအောင်။ နှိုင်းယှဉ်ကြည့်ရန် ဘေးတွင် မပိတ်ပင်ထားသော ရွေးချယ်စရာစာရင်း၏ နမူနာကို ကြည့်ပါ။

<select disabled>
	<option>မြို့၁</option>
	<option selected>မြို့၂</option>
	<option>မြို့၃</option>
	<option>မြို့၄</option>
</select>
<select>
	<option>မြို့၁</option>
	<option selected>မြို့၂</option>
	<option>မြို့၃</option>
	<option>မြို့၄</option>
</select>

ဤအရာကိုလည်း ကြည့်ပါ

ပိတ်ပင်ထားသော အစိတ်အပိုင်းအတွက် စတိုင်များကို သတ်မှတ်ပေးသော pseudoclass disabled,
မပိတ်ပင်ထားသော အစိတ်အပိုင်းအတွက် စတိုင်များကို သတ်မှတ်ပေးသော pseudoclass enabled,