ఈ కథనం జావాస్క్రిప్ట్‌లోని HTML DOM ఇన్పుట్ చెక్బాక్స్ “డిసేబుల్” ప్రాపర్టీ యొక్క ప్రయోజనం, పని మరియు వినియోగాన్ని వివరిస్తుంది.
HTML DOM ఇన్పుట్ చెక్బాక్స్ “డిసేబుల్” ప్రాపర్టీ జావాస్క్రిప్ట్‌లో ఎలా పని చేస్తుంది?
ఇన్పుట్ చెక్బాక్స్ ' వికలాంగుడు ”ప్రాపర్టీ “చెక్బాక్స్” లక్షణంపై ఆధారపడి ఉంటుంది. ఇచ్చిన చెక్‌బాక్స్‌లను నిలిపివేయడానికి మరియు నిలిపివేయడానికి ఇది HTML ఫారమ్‌లు మరియు ఇన్పుట్ ఫీల్డ్‌లలో పని చేస్తుంది.
సింటాక్స్ (డిసేబుల్ ప్రాపర్టీని సెట్ చేయండి)
చెక్బాక్స్ ఆబ్జెక్ట్. వికలాంగుడు = నిజం | తప్పుడునిర్వచించిన రిటర్న్ సింటాక్స్ ప్రకారం, “డిసేబుల్” ప్రాపర్టీ ఈ క్రింది విధంగా జాబితా చేయబడిన రెండు పారామితులకు మద్దతు ఇస్తుంది:
- నిజం: సంబంధిత చెక్బాక్స్ నిలిపివేయబడిందని ఇది సూచిస్తుంది.
- తప్పు (డిఫాల్ట్ విలువ): ఇది అనుబంధిత చెక్బాక్స్ నిలిపివేయబడలేదని సూచించే ఐచ్ఛిక విలువ.
వాపసు (వికలాంగ ఆస్తిని తిరిగి ఇవ్వండి)
చెక్బాక్స్ ఆబ్జెక్ట్. వికలాంగుడుపై వాక్యనిర్మాణంలో, “ చెక్బాక్స్ ఆబ్జెక్ట్ 'HTMLకి అనుగుణంగా ఉంటుంది' చెక్బాక్స్ ' మూలకం.
'వికలాంగ' ఆస్తి యొక్క ఆచరణాత్మక అమలును అర్థం చేసుకోవడానికి దిగువ ఉదాహరణలలో పైన నిర్వచించిన సింటాక్స్‌లను ఉపయోగించుకుందాం.
ఉదాహరణ 1: ఇన్పుట్ చెక్బాక్స్ “డిసేబుల్” ప్రాపర్టీని వర్తింపజేయడం ప్రాథమిక వాక్యనిర్మాణాన్ని ఉపయోగించడం
మొదటి ఉదాహరణలో, నిర్వచించిన సాధారణ వాక్యనిర్మాణాన్ని ఉపయోగించడం ద్వారా దానిని నిలిపివేయడానికి “చెక్బాక్స్” జోడించబడింది.
HTML కోడ్
ముందుగా, ఇచ్చిన HTML కోడ్‌ను విశ్లేషించండి:
< శరీర శైలి = 'టెక్స్ట్-అలైన్: సెంటర్' >
< h2 > HTML DOM ఇన్పుట్ చెక్బాక్స్ జావాస్క్రిప్ట్‌లో డిసేబుల్ ప్రాపర్టీ h2 >
చెక్బాక్స్ : < ఇన్పుట్ రకం = 'చెక్ బాక్స్' id = 'డెమో' > ఫారమ్ సమర్పించబడింది < br >< br >
< p > ఇచ్చిన చెక్బాక్స్ నిలిపివేయబడింది p >
పై కోడ్ లైన్లలో:
- ది ' <బాడీ> 'ట్యాగ్ 'కి సమలేఖనం చేయబడిన శరీర విభాగాన్ని నిర్దేశిస్తుంది కేంద్రం '' సహాయంతో శైలి ' గుణం.
- ది ' ” ట్యాగ్ స్థాయి 2 యొక్క ఉపశీర్షికను నిర్వచిస్తుంది.
- ది ' <ఇన్పుట్> 'ట్యాగ్ ఇన్పుట్ రకాన్ని పేర్కొనడం ద్వారా 'చెక్బాక్స్'ని సృష్టిస్తుంది చెక్బాక్స్ 'అసైన్డ్ ఐడిని కలిగి ఉంది' డెమో ”.
- ది ' ”ట్యాగ్ ఫలిత ఫలితాన్ని ప్రదర్శించడానికి పేరా మూలకాన్ని జోడిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
తరువాత, జావాస్క్రిప్ట్ కోడ్‌ను చూడండి:
< స్క్రిప్ట్ >పత్రం. getElementById ( 'డెమో' ) . వికలాంగుడు = నిజం ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో, “ document.getElementById() 'డెమో' ఐడిని ఉపయోగించి చెక్‌బాక్స్‌ని పొందేందుకు 'పద్ధతి వర్తించబడుతుంది మరియు 'డిసేబుల్' ప్రాపర్టీ విలువ 'కి సెట్ చేయబడింది నిజం ” ఇది చెక్‌బాక్స్‌ను నిలిపివేస్తుంది.
అవుట్‌పుట్
'' కారణంగా ఇచ్చిన చెక్బాక్స్ నిలిపివేయబడిందని ఎగువ అవుట్‌పుట్ నిర్ధారిస్తుంది. వికలాంగుడు 'ఆస్తి సెట్ చేయబడింది' నిజం ”.
ఉదాహరణ 2: ఇన్పుట్ చెక్బాక్స్ “డిసేబుల్” ప్రాపర్టీ విలువను తిరిగి ఇవ్వడం
లక్ష్యం చేయబడిన చెక్బాక్స్ స్థితిని బూలియన్ విలువ (నిజం/తప్పు)గా తిరిగి ఇవ్వడానికి ఈ ఉదాహరణ 'డిసేబుల్' ప్రాపర్టీని వర్తిస్తుంది.
HTML కోడ్
కింది HTML కోడ్‌ను పరిగణించండి:
< శరీర శైలి = 'టెక్స్ట్-అలైన్: సెంటర్' >< h2 > HTML DOM ఇన్పుట్ చెక్బాక్స్ జావాస్క్రిప్ట్‌లో డిసేబుల్ ప్రాపర్టీ h2 >
చెక్బాక్స్ : < ఇన్పుట్ రకం = 'చెక్ బాక్స్' వికలాంగుడు = నిజం id = 'డెమో' > ఫారమ్ సమర్పించబడింది < br >< br >
< p id = 'నమూనా' > p >
పై కోడ్ బ్లాక్‌లో:
- చెక్బాక్స్ కేటాయించబడింది మరియు దాని స్థితి “ వికలాంగుడు 'ఆస్తి సెట్ చేయబడింది' నిజం ”.
- ఆ తరువాత, ఖాళీ ' అవుట్‌పుట్‌ను జోడించడానికి కేటాయించిన id “నమూనా”తో మూలకం జోడించబడింది.
జావాస్క్రిప్ట్ కోడ్
ఇప్పుడు, జావాస్క్రిప్ట్ కోడ్‌కి వెళ్లండి:
< స్క్రిప్ట్ >అక్కడ ఒక = పత్రం. getElementById ( 'డెమో' ) . వికలాంగుడు ;
పత్రం. getElementById ( 'నమూనా' ) . అంతర్గత HTML = a ;
స్క్రిప్ట్ >
పై కోడ్‌లో:
- వేరియబుల్ ' a 'ఉపయోగిస్తుంది' document.getElementById() 'చెక్‌బాక్స్‌ను దాని ఐడి 'డెమో' ఉపయోగించి యాక్సెస్ చేయడానికి మరియు 'ని అనుబంధించడానికి' పద్ధతి వికలాంగుడు ” పొందబడిన చెక్బాక్స్ నిలిపివేయబడిందో లేదో తనిఖీ చేయడానికి ప్రాపర్టీ.
- మళ్లీ వర్తింపజేసిన “document.getElementById()” పద్ధతి చేర్చబడిన ఖాళీ పేరాను పొందుతుంది మరియు “డిసేబుల్” ఆస్తి స్థితిని పేరాగా ప్రదర్శిస్తుంది.
అవుట్‌పుట్
విశ్లేషించినట్లుగా, ఫలితం 'చెక్బాక్స్' కేటాయించిన స్థితిని అందిస్తుంది, అనగా, ' నిజం ”.
ఉదాహరణ 3: ఇన్పుట్ చెక్బాక్స్ “డిజేబుల్డ్” ప్రాపర్టీని ఉపయోగించి చెక్‌బాక్స్‌ని డిసేబుల్ చేయండి మరియు అన్ డిజేబుల్ చేయండి
చెక్బాక్స్ స్థితిని సెట్ చేయడం మరియు తిరిగి ఇవ్వడం మాత్రమే కాకుండా, “డిసేబుల్” ప్రాపర్టీ వినియోగదారులను చెక్‌బాక్స్‌ను అదే సమయంలో డిసేబుల్ చేయడానికి మరియు అన్-డిజేబుల్ చేయడానికి అనుమతిస్తుంది. ఆచరణాత్మకంగా చూద్దాం.
HTML కోడ్
వ్రాసిన HTML కోడ్‌ని సమీక్షిద్దాం:
< శరీర శైలి = 'టెక్స్ట్-అలైన్: సెంటర్' >< h2 > HTML DOM ఇన్పుట్ చెక్బాక్స్ జావాస్క్రిప్ట్‌లో డిసేబుల్ ప్రాపర్టీ h2 >
చెక్బాక్స్ : < ఇన్పుట్ రకం = 'చెక్ బాక్స్' id = 'డెమో' > ఫారమ్ సమర్పించబడింది ఇన్పుట్ >< br >< br >
< బటన్ క్లిక్ చేయండి = 'చెక్ డిజేబుల్()' > చెక్‌బాక్స్‌ను నిలిపివేయండి బటన్ >
< బటన్ క్లిక్ చేయండి = 'చెక్ అన్ండిసేబుల్()' > చెక్‌బాక్స్‌ను నిలిపివేయండి బటన్ >
పై కోడ్ బ్లాక్‌లో:
- అదేవిధంగా, చెక్‌బాక్స్‌ని చేర్చండి మరియు '' ఉన్న బటన్‌ను జోడించండి క్లిక్ చేయండి 'ని అమలు చేసే సంఘటన' చెక్ డిజేబుల్() బటన్ క్లిక్ మీద ఫంక్షన్.
- ఆ తర్వాత, రెండవ బటన్ జోడించబడింది, అది 'ఆన్‌క్లిక్' ఈవెంట్ హ్యాండ్లర్‌ని కూడా ఉపయోగిస్తుంది చెక్ అన్ డిసేబుల్() బటన్ క్లిక్ చేసినప్పుడు ఫంక్షన్.
జావాస్క్రిప్ట్ కోడ్
తరువాత, దిగువ పేర్కొన్న కోడ్ ద్వారా వెళ్ళండి:
< స్క్రిప్ట్ >ఫంక్షన్ చెక్ డిసేబుల్ ( ) {
పత్రం. getElementById ( 'డెమో' ) . వికలాంగుడు = నిజం ;
}
ఫంక్షన్ చెక్ అన్‌డైసేబుల్ ( ) {
పత్రం. getElementById ( 'డెమో' ) . వికలాంగుడు = తప్పుడు ;
}
స్క్రిప్ట్ >
పై కోడ్ లైన్లలో:
- ' అనే ఫంక్షన్‌ను నిర్వచించండి చెక్ డిజేబుల్() 'అది వర్తిస్తుంది' document.getElementById() ”మెథడ్ చెక్‌బాక్స్‌ని దాని ఐడి “డెమో” ద్వారా చేరుకోవడం మరియు దాని విలువను “ట్రూ”గా సెట్ చేయడం.
- రెండవ ఫంక్షన్ ' చెక్ అన్ డిసేబుల్() ” ఫంక్షన్ మళ్లీ చెక్‌బాక్స్‌ని యాక్సెస్ చేయడానికి “document.getElementById()” పద్ధతిని వర్తింపజేస్తుంది మరియు వినియోగదారు “చెక్‌బాక్స్‌ని అన్‌డిసేబుల్” పేరుతో చేర్చబడిన రెండవ బటన్‌పై క్లిక్ చేస్తే దాని విలువను “తప్పు”కి సెట్ చేస్తుంది.
అవుట్‌పుట్
వినియోగదారు మొదటి బటన్‌పై క్లిక్ చేసినప్పుడు అవుట్‌పుట్ ఇచ్చిన చెక్‌బాక్స్‌ను “డిజేబుల్” చేస్తుంది మరియు దాని ప్రకారం వినియోగదారు రెండవ బటన్‌పై క్లిక్ చేస్తే దాన్ని “అన్-డిజేబుల్” చేస్తుంది.
ముగింపు
జావాస్క్రిప్ట్‌లో, HTML DOM ఇన్పుట్ చెక్బాక్స్ “ వికలాంగుడు 'చెక్బాక్స్' యొక్క ఎంచుకున్న స్థితిని సెట్ చేయడానికి మరియు తిరిగి ఇవ్వడానికి ప్రాపర్టీ వినియోగదారులకు సహాయపడుతుంది. ఇది 'సెట్' మరియు 'రిటర్న్' ప్రక్రియల కోసం సాధారణీకరించిన సింటాక్స్‌లను నిర్వచిస్తుంది. దాని సెట్ సింటాక్స్ రెండు విలువలపై పనిచేస్తుంది ' నిజం 'మరియు' తప్పుడు ”. మరోవైపు, దాని రిటర్న్ సింటాక్స్‌కు ఏ పరామితి అవసరం లేదు. ఈ కథనం జావాస్క్రిప్ట్‌లోని HTML DOM ఇన్పుట్ చెక్బాక్స్ “డిసేబుల్” ప్రాపర్టీ యొక్క లక్ష్యం, పని మరియు ఆచరణాత్మక అమలును ప్రదర్శించింది.