क्या HTML चेकबॉक्स को आसानी से सेट किया जा सकता है?

Question

मुझे लगा कि वे हो सकते हैं, लेकिन जैसा कि मैं अपना पैसा नहीं लगा रहा हूं, जहां मेरा मुंह (बोलने के लिए) था, आसानी से पढ़ी गई विशेषता को सेट करना वास्तव में कुछ भी नहीं लगता है।

मैं अक्षम का उपयोग नहीं करूंगा, क्योंकि मैं चाहता हूं कि चेक किए गए चेक बॉक्स बाकी फॉर्म के साथ जमा किए जाएं, मैं नहीं चाहता कि ग्राहक कुछ परिस्थितियों में उन्हें बदलने में सक्षम हों।

Comments

A (दुर्भावनापूर्ण) क्लाइंट हमेशा एक चेकबॉक्स का मान बदल सकता है (या मनमाना अनुरोध भेज सकता है)। हमेशा सुनिश्चित करें कि आप उचित सर्वर-साइड सत्यापन करते हैं!

— knittl

@knittl लेकिन एक सामान्य विस्टर में कोई (दुर्भावनापूर्ण) क्लाइंट नहीं है। और एक सामान्य विस्टर एक जानकारी को बदलना नहीं चाहता था (वह है readonly)

— क्रिश्चियन गोल्हार्ट

@knittl आप की पूरी भावना को खारिज करने लगते हैं readonly! फिर यह विशेषता क्यों मौजूद होगी!

— इज़हार आज़मी

@IzharAazmi: readonlyकेवल एक क्लाइंट-साइड विशेषता है जो किसी ब्राउज़र को साइट को ठीक से प्रस्तुत करने और फिर उससे सही अनुरोध का निर्माण करने में मदद करता है। सर्वर readonlyप्रदान किए गए पृष्ठ की विशेषता के बारे में नहीं जान सकता है और न ही जानना चाहिए । यह मान लेना चाहिए कि अनुरोध कहीं से भी आया है (और संभवतः दुर्भावनापूर्ण इरादे से); उपयोगकर्ता द्वारा प्रदान किए गए इनपुट पर कभी भी भरोसा न करें। फिर भी, एक चेकबॉक्स का मान क्यों भेजें जिसे आप अनुरोध में संपादित नहीं कर सकते हैं (यदि आप रेंडर करने से पहले मूल्य निर्धारित करते हैं, तो आपको अनुरोध प्रस्तुत किए जाने पर पहले से ही मूल्य पता है, इसलिए अनुरोध में इसे प्रसारित करने की कोई आवश्यकता नहीं है)

— knittl

@knittl मैं सहमत हूँ! लेकिन आप देखते हैं कि readonlyविशेषता किसी कारण से वहां मौजूद है। यह निश्चित रूप से सर्वर साइड कार्यान्वयन के साथ कुछ नहीं करना है। लेकिन यह उपयोगकर्ता को यह बताने के लिए है कि "अरे! यह मान यहां लिया जा रहा है, और / लेकिन आप इसे बदल नहीं सकते हैं।"

— इज़हार आज़मी

Answer 1

आप इसका उपयोग कर सकते हैं:

<input type="checkbox" onclick="return false;"/>

यह काम करता है क्योंकि क्लिक इवेंट से गलत लौटने पर निष्पादन की श्रृंखला जारी रहती है।

Comments

जावास्क्रिप्ट में गलत रिटर्न करने से क्लिक या कुंजी हैंडलर के निष्पादन की श्रृंखला जारी रहती है। चेकबॉक्स की स्थिति से कोई लेना-देना नहीं है

— जेसिका ब्राउन

पुनश्च ... यदि आप चाहते हैं कि चेकबॉक्स चेक किए गए राज्य में हो तो आपको जोड़ना होगा checked="checked", जावास्क्रिप्ट के साथ गड़बड़ नहीं करना चाहिए। जावास्क्रिप्ट बस इनपुट ऑब्जेक्ट पर नजर रखने के लिए माउस क्लिक को मजबूर करने के लिए है, चेकबॉक्स की स्थिति सेट करने के लिए नहीं।

— जेसिका ब्राउन

इस मामले में आर / ओ स्थिति का कोई दृश्य संकेत नहीं।

— जेसी ग्लिक

यद्यपि अगले इनपुट पर नेविगेट करने के लिए TAB का उपयोग करने से रोकता है।

— user327961

पूरी तरह से विफल रहता है अगर जावास्क्रिप्ट अक्षम है!

— चल रहा

Answer 2

READONLYचेकबॉक्स पर काम नहीं करता है क्योंकि यह आपको फ़ील्ड के मान को संपादित करने से रोकता है , लेकिन चेकबॉक्स के साथ आप वास्तव में फ़ील्ड की स्थिति ("बंद") का संपादन कर रहे हैं

से faqs.org :

यह समझना महत्वपूर्ण है कि उपयोगकर्ता केवल क्षेत्र के मूल्य को बदलने से रोकता है, क्षेत्र के साथ बातचीत करने से नहीं। चेकबॉक्स में, उदाहरण के लिए, आप उन्हें चालू या बंद कर सकते हैं (इस प्रकार चेक स्थिति सेट कर सकते हैं) लेकिन आप फ़ील्ड का मान नहीं बदलते हैं।

यदि आप उपयोग नहीं करना चाहते हैं, disabledलेकिन फिर भी मूल्य जमा करना चाहते हैं, तो एक छिपे हुए क्षेत्र के रूप में मूल्य कैसे जमा करें और उपयोगकर्ता को इसकी सामग्री को तब प्रिंट करें जब वे संपादन मानदंडों को पूरा नहीं करते हैं? जैसे

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Comments

काम करता है, लेकिन यह एक तरह से .. अच्छी तरह से गंदा है, चेकबॉक्स पर आसानी से किया जाना चाहिए जो अंतर्ज्ञान बताता है।

— 21

अंतर्ज्ञान हमें मूर्ख बनाता है, जैसा कि कॉनरॉय ने समझाया था।

— 18

अंतर्ज्ञान अमेरिका को बेवकूफ नहीं बनाता है, इसने उन लोगों को बेवकूफ बनाया जिन्होंने चेकबॉक्स को इस तरह से लागू किया था।

— कालिफ सेप

@ConroyP -> "यह आपको फ़ील्ड के मान को संपादित करने से रोकता है, लेकिन चेकबॉक्स के साथ आप वास्तव में फ़ील्ड की स्थिति (" बंद) "" संपादित कर रहे हैं। यह एक कमजोर निर्णय के लिए एक बहुत कमजोर औचित्य है। 'राज्य' और 'मूल्य' हम में से अधिकांश के लिए 'toMAYto' और 'toMAHto' के समान हैं, जैसा कि आप असहमत लोगों द्वारा किए गए उत्थान द्वारा देख सकते हैं।

— McAuley

Answer 3

यह एक चेकबॉक्स है जिसे आप बदल नहीं सकते हैं:

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

बस disabled="disabled"एक विशेषता के रूप में जोड़ें ।

टिप्पणियों को संबोधित करने के लिए संपादित करें:

यदि आप चाहते हैं कि डेटा को वापस पोस्ट किया जाए, तो एक साधारण समाधान की तरह एक छिपे हुए इनपुट पर एक ही नाम लागू करना है:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

इस तरह, जब चेकबॉक्स को 'अक्षम' पर सेट किया जाता है, तो यह केवल डेटा के दृश्य प्रतिनिधित्व के उद्देश्य को पूरा करता है, इसके बजाय वास्तव में डेटा से 'लिंक' किया जाता है। पोस्ट बैक में, छिपे हुए इनपुट का मान भेजा जा रहा है जब चेकबॉक्स अक्षम हो जाता है।

Comments

ध्यान दें कि "अक्षम" चेकबॉक्स POST डेटा के माध्यम से मूल्य नहीं भेजता है।

— बीफोबे

@powtac आप यह संबोधित करने में विफल हैं कि वह पोस्ट किए गए डेटा को चाहता है, आपका उदाहरण ऐसा नहीं करता है।

— डेविड माएर्टेंसन

कोई रास्ता नहीं है इस उत्तर में 105 उत्थान होना चाहिए। यह सब कुछ ओपी राज्यों के खिलाफ जाता है।

— JM4

@nathanhayfield: उस तर्क से, मुझे किसी भी विषय के बारे में उपयोगी उत्तर पोस्ट करने और उठने में सक्षम होना चाहिए । :(

— माइकल ब्रे

@MichaelBray मैं अनुमान लगा रहा हूं कि इसे बहुत अधिक बढ़ावा मिलता है क्योंकि बहुत सारे लोग जानना चाहते हैं कि चेकबॉक्स को आसानी से कैसे बनाया जाए ताकि वे ऐसा करें: 1) Google "चेकबॉक्स आसानी से"। 2) देखें कि इस सवाल का शीर्षक वे क्या करना चाहते हैं और इसे क्लिक करना है। 3) जब तक उन्हें यह उत्तर नहीं मिल जाता, तब तक नीचे स्क्रॉल करें। 4) खुशी और उत्थान।

— मार्क बायर्स

Answer 4

<input type="checkbox" onclick="this.checked=!this.checked;">

लेकिन आप यह सुनिश्चित करने के लिए कि इसे बदला नहीं गया है, सर्वर पर मौजूद डेटा को पूरी तरह से सत्यापित करना चाहिए।

Comments

मैंने इसे सबसे अच्छा समाधान पाया; इसके अलावा, मैं एक अच्छा सा संकेत प्रदर्शित करने के लिए कोड का एक और टुकड़ा (कहो, कुछ jquery- सामान) कह सकता हूं जो कहता है कि "आप इसे तब तक नहीं बदल सकते जब तक आप पहली बार x नहीं करते"। तो कुछ इस तरह से: "... onclick = 'this.checked =! यह चेक किया गया; जावास्क्रिप्ट: theCheckboxWasClicked ();' ..."

— Bane

यह

— डॉक्यूमेंट

यह थोड़ा हैकिश है, लेकिन यह एक सरल, परिपूर्ण, लगभग सुरुचिपूर्ण छोटी हैक है।

— रसेल

सबसे अच्छा उपाय। सही उत्तर के रूप में चिह्नित किया जाना चाहिए।

— स्कॉटी

जैसा कि ऊपर कहा गया है, यह IE में डबल क्लिक करने पर काम नहीं करता है। मैंने इस्तेमाल किया: onchange = "this.checked = true;"

— ऋषिकेश

Answer 5

एक और "सरल समाधान":

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

विकलांग = "अक्षम" / अक्षम = सत्य

Comments

यह सभी मुद्दों को हल करता है: केवल-पढ़ने के लिए चेकबॉक्स बनाता है, POST डेटा को सबमिट करता है और रीड-ओनली-नेस (सभी जावास्क्रिप्ट समाधानों के विपरीत) के दृश्य संकेत प्रदान करता है

— Dalibor Frivaldsky

आप भी छोड़ सकता है nameऔर valueअपने डमी-बॉक्स के गुण, भी ="checked"और ="diabled"attrib-मूल्यों से हटा दिया जा सकता है। w3.org/TR/html-markup/input.checkbox.html

— Sampo Sarrala - codidact.org

सबसे महत्वपूर्ण यह समाधान सादे पुराने HTML है और जावास्क्रिप्ट पर भरोसा नहीं करता है।

— ग्लेनग

Answer 6

यह थोड़ा प्रयोज्य मुद्दा प्रस्तुत करता है।

यदि आप एक चेकबॉक्स प्रदर्शित करना चाहते हैं, लेकिन इसके साथ सहभागिता नहीं करने दें, तो चेकबॉक्स भी क्यों?

हालाँकि, मेरा दृष्टिकोण विकलांगों का उपयोग करना होगा (उपयोगकर्ता एक अक्षम चेकबॉक्स को संपादन योग्य नहीं होने की उम्मीद करता है, इसके बजाय जेएस का उपयोग एक सक्षम काम नहीं करने के लिए), और जावास्क्रिप्ट का उपयोग करते हुए एक फॉर्म सबमिट हैंडलर जोड़ें जो चेकबॉक्स को फॉर्म से ठीक पहले सक्षम करता है। प्रस्तुत। इस तरह से आप अपने मूल्यों को पोस्ट करते हैं।

कुछ इस तरह से:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

Comments

एक अन्य विकल्प अक्षम चेकबॉक्स (या एक छवि या चेक / अनियंत्रित को निरूपित करने के लिए) प्रदर्शित करना है और एक छिपा हुआ इनपुट है जो सर्वर द्वारा संसाधित होता है।

— जुआन मेंडेस

जब आप एक फॉर्म प्राप्त करते हैं, तो यह एक प्रयोज्य मुद्दा नहीं होता है, जिसमें आपके कुछ निर्णय कुछ अन्य इनपुट (उर्फ: एक मूल्य निर्धारित करते हैं जो आपके पहले क्रिया को पूर्ववत नहीं करते हैं तो उन्हें छुआ नहीं जा सकता है।)। मुझे नफरत है जब लोग जवाब देने के बजाय लोगों के दिमाग को बदलने की कोशिश करते हैं (यह आपके बारे में नहीं है @FlySwat, आपने जवाब दिया)।

— फेरेमसन

उद्देश्य एक चेकबॉक्स का उपयोग प्रदर्शन क्षेत्र के रूप में करना है "यह मान सत्य है", जो "सच" / "गलत" -s के एक गुच्छा की तुलना में एक तालिका को स्कैन करना आसान है। निश्चित रूप से, आप एक आइकन का उपयोग कर सकते हैं लेकिन, एक रूप में, चेकबॉक्स वहां लगता है, उपयोग करने के लिए पका हुआ।

— ओले

मैं आमतौर पर इस समाधान का उपयोग करता हूं लेकिन .. कभी-कभी उपयोगकर्ता, विशेष रूप से धीमे कनेक्शन पर, प्रपत्र सबमिट करने के बाद सक्षम किए गए इनपुट बटन देखें और इसके साथ खेलने का निर्णय लें।

— systempuntoout

मान लें कि आपके पास "सुविधाओं" की एक श्रृंखला है जिसे शामिल किया जा सकता है या नहीं, इसलिए आपके पास एक टेम्पलेट है जो सुविधा पर एक चेक बॉक्स दिखाता है। लेकिन कभी-कभी, एक सुविधा कुछ और के लिए एक शर्त है ... इसलिए इसे शामिल किया जाना चाहिए, लेकिन आप अपने टेम्पलेट को बदलना नहीं चाहते हैं। ठीक वैसा ही जैसा कि एक अक्षम / चेक किया गया चेकबॉक्स है। वे हमेशा के लिए चारों ओर हो गए हैं, इसलिए मुझे उम्मीद है कि "एक चेकबॉक्स भी क्यों" प्रश्न बयानबाजी था।

— त्रिवेंको

Answer 7

<input type="checkbox" readonly="readonly" name="..." />

jquery के साथ:

$(':checkbox[readonly]').click(function(){
            return false;
        });

यह अभी भी कुछ दृश्य संकेत (सीएसएस, पाठ, ...) देने के लिए एक अच्छा विचार हो सकता है, कि नियंत्रण आदानों को स्वीकार नहीं करेगा।

Comments

यह मेरे लिए ie6 में काम नहीं किया, आसानी से विशेषता फिल्टर सही ढंग से काम नहीं करता है। मैंने उस फिल्टर से निकालकर फंक्शन की बॉडी में एट्रीब्यूट चेक लगाया और यह ६-६ में ठीक काम करता है।

— gt124

मैंने मानक विशेषता के बजाय "डेटा-रीडऑनली = सच" का उपयोग किया और यह सभी ब्राउज़रों में ठीक काम करता है। मुझे यह समाधान अधिक पसंद है तो दूसरों को +1

— peipst9lker

चयनकर्ता होना चाहिए $(':checkbox[readonly]')सभी उम्मीदवार चेक बॉक्स का चयन करने के लिए के रूप में readonlyविशेषता मान वैकल्पिक है।

— इज़हार आज़मी

Answer 8

मैंने परिणाम प्राप्त करने के लिए इसका उपयोग किया:

<input type=checkbox onclick="return false;" onkeydown="return false;" />

Comments

मेरे मामले में यह अर्धविराम के बिना काम करता है, अन्यथा यह नहीं होता है।

— मविज़ा

Answer 9

मैं नीचे दिए गए समाधान को नोटिस करने के लिए हुआ। इसी मुद्दे के लिए मेरे शोध में यह पाया गया। मैंने ऐसा नहीं किया है जो इसे पोस्ट किया था, लेकिन यह मेरे द्वारा नहीं बनाया गया था। यह jQuery का उपयोग करता है:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

इससे चेकबॉक्स केवल वही पढ़ेगा जो क्लाइंट को आसानी से डेटा दिखाने के लिए मददगार होगा।

Comments

सवाल एक चेकबॉक्स के लिए पूछता है और एक अक्षम नहीं है। तो यह सबसे सही उत्तर है।

— नीलेशचौहान

Answer 10

onclick="javascript: return false;"

Comments

हम्मम ... यह झूठे / अनियंत्रित मामले के लिए काम कर रहा है, लेकिन onclick="javascript: return true;"यह सामान्य चेकबॉक्स की तरह काम करता है। संकेत? धन्यवाद!

— ओली

@ ओली, checkedविशेषता जोड़ें और falseजगह में रखें।

— क्वर्टी

Answer 11

माना गया उत्तर, लेकिन अधिकांश उत्तर इसे जटिल मानते हैं।

जैसा कि मैंने इसे समझा, ओपी मूल रूप से चाहते थे:

1. स्थिति दिखाने के लिए पढ़ें चेकबॉक्स।
2. मान फॉर्म के साथ लौटा।

इस बात पर ध्यान दिया जाना चाहिए कि:

1. ओपी ने disabledविशेषता का उपयोग नहीं करना पसंद किया , क्योंकि वे चाहते हैं कि चेक किए गए चेक बॉक्स बाकी फॉर्म के साथ प्रस्तुत किए जाएं।
2. अनचेक किए गए चेकबॉक्स को फॉर्म के साथ जमा नहीं किया जाता है, क्योंकि ओपी में बोली 1 से ऊपर है। मूल रूप से, चेकबॉक्स का मान केवल तभी मौजूद होता है जब उसे चेक किया जाता है।
3. एक अक्षम चेकबॉक्स स्पष्ट रूप से इंगित करता है कि इसे डिज़ाइन द्वारा नहीं बदला जा सकता है, इसलिए उपयोगकर्ता इसे बदलने का प्रयास करने की संभावना नहीं है।
4. एक चेकबॉक्स का मान अपनी स्थिति को इंगित करने तक सीमित नहीं है, जैसे कि yesया false, लेकिन कोई भी पाठ हो सकता है।

इसलिए, चूंकि readonlyविशेषता काम नहीं करती है, सबसे अच्छा समाधान, कोई जावास्क्रिप्ट की आवश्यकता नहीं है, यह है:

1. एक विकलांग चेकबॉक्स, जिसका कोई नाम या मूल्य नहीं है।
2. यदि चेकबॉक्स को चेक के रूप में प्रदर्शित किया जाना है, तो सर्वर पर संग्रहीत नाम और मान के साथ एक छिपा हुआ क्षेत्र।

तो एक चेकबॉक्स के लिए:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

एक अनियंत्रित चेकबॉक्स के लिए:

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

विकलांग इनपुट के साथ मुख्य समस्या, विशेष रूप से चेकबॉक्स, उनके खराब विपरीत हैं जो कुछ दृश्य विकलांगता के साथ कुछ के लिए एक समस्या हो सकती है। सादे शब्दों द्वारा किसी मूल्य को इंगित करना बेहतर हो सकता है, जैसे कि Status: noneया Status: implemented, लेकिन बाद में उपयोग किए जाने पर ऊपर छिपे इनपुट सहित, जैसे:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Answer 12

वर्तमान उत्तरों में से अधिकांश में इनमें से एक या अधिक समस्याएं हैं:

1. केवल माउस नहीं कीबोर्ड की जांच करें।
2. केवल पृष्ठ लोड पर जाँच करें।
3. कभी-कभी लोकप्रिय परिवर्तन को हुक करें या ऐसी घटनाओं को जमा करें जो हमेशा काम नहीं करेंगे अगर कुछ और उन्हें झुका दिया है।
4. एक छिपे हुए इनपुट या अन्य विशेष तत्वों / विशेषताओं की आवश्यकता होती है, जिन्हें आपको जावास्क्रिप्ट का उपयोग करके चेकबॉक्स को फिर से सक्षम करने के लिए पूर्ववत करना होगा।

निम्नलिखित सरल है और उन समस्याओं में से कोई भी नहीं है।

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

यदि चेकबॉक्स आसानी से पढ़ा जाता है, तो यह नहीं बदलेगा। अगर यह नहीं है, यह होगा। यह jquery का उपयोग करता है, लेकिन आप शायद पहले से ही उपयोग कर रहे हैं ...

यह काम करता हैं।

Answer 13

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

Answer 14

यदि आप चाहते हैं कि उन्हें फ़ॉर्म के साथ सर्वर पर सबमिट किया जाए, लेकिन उपयोगकर्ता के लिए इंटरसेक्टिव न हों, तो आप कीबोर्ड के माध्यम से बदलने से रोकने के लिए pointer-events: nonecss ( IE10- और ओपेरा 12- को छोड़कर सभी आधुनिक ब्राउज़रों में काम करता है ) और टैब-इंडेक्स सेट कर सकते हैं  -1। यह भी ध्यान दें कि आप labelटैग का उपयोग नहीं कर सकते क्योंकि इस पर क्लिक करने से राज्य वैसे भी बदल जाएगा।

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

Comments

मुझे आपके पिछले वाक्य को दोहराने दें (मैंने इसे याद किया और कीमती समय बर्बाद किया): अगर आपकी तकनीक बेकार है (<Firefox> (फ़ायरफ़ॉक्स में यह पूरी तरह से काम करता है, वास्तव में। मुद्दा क्रोम के साथ है)।

— निकोलो एम।

@ एनकोलोएम।, लेकिन अगर आप जानते हैं कि यह आसानी से है, तो इसे लेबल में क्यों लपेटें? इसके अलावा आप इसके बाद लेबल लगा सकते हैं और forविशेषता का उपयोग कर सकते हैं । उस स्थिति में आप उपयोग कर सकते हैं input[type="checkbox"][readonly] + label { pointer-events: none !important; }।

— क्वर्टी

@KevinBui, क्या आपने हटाया labelऔर जोड़ा tabindex? आप उस पर एक स्थान को दबाने के लिए अपरिहार्य तत्व पर कैसे ध्यान केंद्रित करते हैं?

— क्वाटर्ली

Answer 15

<input type="checkbox" onclick="return false" /> आप के लिए काम करेंगे, मैं इस का उपयोग कर रहा हूँ

Answer 16

यहाँ पर कुछ उत्तर थोड़े गोल-गोल लगते हैं, लेकिन यहाँ एक छोटी सी हैक है।

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

फिर jquery में आप या तो दो विकल्पों में से एक चुन सकते हैं:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

​

डेमो: http://jsfiddle.net/5WFYt/

Comments

और यह "गोल चक्कर" नहीं है ??

— KoZm0kNoT

नहीं, यह बहुत प्रत्यक्ष है .. यह सिर्फ संक्षिप्त नहीं है।

— sksallaj

Answer 17

उपरोक्त उत्तरों पर निर्माण, यदि jQuery का उपयोग कर रहे हैं, तो यह सभी इनपुट के लिए एक अच्छा समाधान हो सकता है:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

मैं इसका उपयोग Asp.Net MVC के साथ कर रहा हूं ताकि कुछ फॉर्म एलिमेंट सेट किए जा सकें। उपरोक्त किसी भी मूल कंटेनर को सेट करके टेक्स्ट और चेक बॉक्स के लिए काम करता है।

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

Answer 18

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

Answer 19

मुझे पता है कि "अक्षम" एक स्वीकार्य जवाब नहीं है, क्योंकि ऑप इसे पोस्ट करना चाहता है। हालाँकि, यदि आप आसानी से विकल्प सेट करते हैं, तो आपको सर्वर साइड EVEN पर मानों को मान्य करना होगा। ऐसा इसलिए है क्योंकि आप किसी दुर्भावनापूर्ण उपयोगकर्ता को रीडायनली विशेषता का उपयोग करके मान पोस्ट करने से रोक नहीं सकते हैं।

मेरा सुझाव है कि मूल मूल्य (सर्वर साइड) को संग्रहीत करें, और इसे अक्षम करने के लिए सेट करें। फिर, जब वे फ़ॉर्म जमा करते हैं, तो पोस्ट किए गए किसी भी मान को अनदेखा करें और आपके द्वारा संग्रहीत मूल मान लें।

यह देखने और ऐसा व्यवहार करेगा जैसे यह एक पठनीय मूल्य है। और यह दुर्भावनापूर्ण उपयोगकर्ताओं के पोस्ट को (अनदेखा) करता है। आप एक पत्थर से 2 पक्षियों को मार रहे हैं।

Answer 20

मैंने कॉनरॉय के उत्तर पर टिप्पणी की होगी, लेकिन इसके लिए 50 प्रतिष्ठा की आवश्यकता है जो मेरे पास नहीं है। मेरे पास एक और जवाब पोस्ट करने के लिए पर्याप्त प्रतिष्ठा है। माफ़ करना।

ConroyP के उत्तर के साथ समस्या यह है कि चेकबॉक्स को अपरिवर्तनीय रूप से प्रस्तुत किया जाता है, इसे पृष्ठ पर भी शामिल नहीं किया जाता है। हालाँकि, इलेक्ट्रॉन्स_अहॉय उतनी अधिक मात्रा में निर्धारित नहीं होता है, लेकिन सबसे अच्छा उत्तर वह होगा जिसमें अपरिवर्तनीय चेकबॉक्स एक जैसा दिखाई देगा, यदि नहीं तो परिवर्तनशील चेकबॉक्स, जैसा कि "अक्षम" विशेषता लागू होने पर होता है। एक समाधान जो दो कारणों को संबोधित करता है इलेक्ट्रॉनों_अहॉय "अक्षम" विशेषता का उपयोग न करने के लिए देता है, जरूरी नहीं कि यह अमान्य हो क्योंकि यह "अक्षम" विशेषता का उपयोग करता है।

दो बूलियन चर मान लें, $ जाँच की और $ अक्षम:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

यदि चेक किया गया चेक सही है, तो चेकबॉक्स प्रदर्शित किया जाता है। यदि चेक किया गया $ झूठा है तो चेकबॉक्स अनियंत्रित है। उपयोगकर्ता चेकबॉक्स की स्थिति को बदल सकता है अगर और केवल अगर $ अक्षम गलत है। उपयोगकर्ता द्वारा या नहीं, चेकबॉक्स अनचेक किए जाने पर "my_name" पैरामीटर पोस्ट नहीं किया गया है। "My_name = 1" पैरामीटर पोस्ट किया गया है जब चेकबॉक्स की जाँच की जाती है, उपयोगकर्ता द्वारा या नहीं। मेरा मानना ​​है कि यह वही है जो इलेक्ट्रॉनों_आह की तलाश में था।

Answer 21

नहीं, इनपुट चेकबॉक्स को आसानी से नहीं पढ़ा जा सकता है।

लेकिन आप उन्हें जावास्क्रिप्ट के साथ आसानी से बना सकते हैं!

उपयोगकर्ता को किसी भी तरह से इसे संशोधित करने से रोककर, इस कोड को किसी भी समय कहीं भी चेकबोन के रूप में आसानी से काम करने के लिए जोड़ें।

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

JQuery लोड होने के बाद आप किसी भी समय इस स्क्रिप्ट को जोड़ सकते हैं।

यह गतिशील रूप से जोड़े गए तत्वों के लिए काम करेगा।

यह पृष्ठ पर किसी भी तत्व पर क्लिक ईवेंट (जो परिवर्तन घटना से पहले होता है) उठाकर काम करता है, यह तब जांचता है कि क्या यह तत्व एक आसानी से चेकबॉक्स है, और यदि यह है, तो यह परिवर्तन को रोकता है।

इसे बनाने के लिए बहुत सारे इफ़ेक्ट हैं जो पृष्ठ के प्रदर्शन को प्रभावित नहीं करते हैं।

Answer 22

बस इस तरह सरल अक्षम टैग का उपयोग करें।

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

Comments

"विकलांग टैग" इस डेटा को प्रस्तुत नहीं करेगा

— Przemysław Kaczmarczyk

Answer 23

एक वैकल्पिक विचार यह है कि ओवरले का उपयोग करें और अपने रीडायनली को कवर करें आदानों

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

Answer 24

यदि आप चाहते हैं कि आपके सभी चेकबॉक्स "लॉक" हों, तो उपयोगकर्ता "चेक किए गए" स्थिति को बदल नहीं सकता है यदि "आसानी से" अटैब मौजूद है, तो आप jQuery का उपयोग कर सकते हैं:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

इस कोड के बारे में अच्छी बात यह है कि यह आपको हर चेकबॉक्स को रिबंड किए बिना आपके कोड पर "आसानी से" विशेषता को बदलने की अनुमति देता है।

यह रेडियो बटन के लिए भी काम करता है।

Answer 25

मुख्य कारण लोगों को केवल-पढ़ने के लिए चेक-बॉक्स और (साथ ही) एक रीड-ओनली रेडियो-समूह ही चाहिए, ताकि जो जानकारी बदली नहीं जा सके, उसे वापस उस उपयोगकर्ता के सामने प्रस्तुत किया जा सके जिस रूप में उसे दर्ज किया गया था।

ठीक है विकलांग ऐसा करेंगे - दुर्भाग्य से अक्षम नियंत्रण कीबोर्ड नेविगेट करने योग्य नहीं हैं और इसलिए सभी पहुंच कानून के गलत हैं। यह HTML में सबसे बड़ा हैंगअप है, जिसके बारे में मुझे पता है।

Answer 26

बहुत देर से योगदान दे रहा है ... लेकिन वैसे भी। पृष्ठ लोड होने पर, वर्तमान में चयनित एक को छोड़कर सभी चेकबॉक्स को अक्षम करने के लिए jquery का उपयोग करें। फिर वर्तमान में चयनित एक को केवल पढ़ने के रूप में सेट करें ताकि यह अक्षम लोगों के समान दिखे। उपयोगकर्ता मान नहीं बदल सकता है, और चयनित मान अभी भी सबमिट करता है।

Answer 27

पार्टी के लिए बहुत देर हो चुकी है लेकिन मुझे MVC (5) के लिए एक उत्तर मिला है मैंने चेकबॉक्स को अक्षम कर दिया है और चेकबॉक्स में एक हिफोर बीफ़ोर जोड़ दिया है, इसलिए जब यह पोस्ट कर रहा है यदि पहले छिपे हुए फ़ील्ड को ढूंढता है और उस मूल्य का उपयोग करता है। यह काम करता है।

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

Answer 28

मैं readonly विशेषता का उपयोग करेगा

<input type="checkbox" readonly>

फिर इंटरैक्शन को अक्षम करने के लिए CSS का उपयोग करें:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

ध्यान दें कि छद्म श्रेणी का उपयोग करना: केवल-पढ़ने के लिए यहाँ काम नहीं करता है।

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

Answer 29

मैं नहीं चाहता कि ग्राहक कुछ परिस्थितियों में उन्हें बदलने में सक्षम हों।

वास्तव में खुद काम नहीं करेगा। आप कुछ फंकी w / सीएसएस करने में सक्षम हो सकते हैं लेकिन हम आमतौर पर उन्हें निष्क्रिय कर देते हैं।

चेतावनी: यदि वे वापस पोस्ट किए जाते हैं तो ग्राहक उन्हें बदल सकता है, अवधि। किसी उपयोगकर्ता को कुछ बदलने से रोकने के लिए आप आसानी से भरोसा नहीं कर सकते। हमेशा fiddler का उपयोग कर सकता है या बस html w / firebug या कुछ ऐसी चीज का जाप कर सकता है।

Comments

आप पूरी तरह से सही हैं, इसलिए मैं यह भी जांचता हूं कि सर्वर साइड पर, यह सेट करना क्लाइंट साइड पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए है।

— लेविहटा

Answer 30

मेरा समाधान वास्तव में फ्लाईस्वाट के समाधान के विपरीत है, लेकिन मुझे यकीन नहीं है कि यह आपकी स्थिति के लिए काम करेगा। मेरे पास चेकबॉक्स का एक समूह है, और प्रत्येक के पास एक ऑनक्लिक हैंडलर है जो फॉर्म को सबमिट करता है (वे एक टेबल के लिए फ़िल्टर सेटिंग्स को बदलने के लिए उपयोग किया जाता है)। मैं पहले क्लिक को अनदेखा करने के बाद से कई क्लिक की अनुमति नहीं देना चाहता। इसलिए मैं पहले क्लिक के बाद, और फ़ॉर्म जमा करने के बाद सभी चेकबॉक्स को अक्षम करता हूं:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

चेकबॉक्स "फिल्टर" की आईडी के साथ स्पैन एलिमेंट में हैं - कोड का दूसरा भाग एक jQuery स्टेटमेंट है जो चेकबॉक्स के माध्यम से पुनरावृत्त करता है और प्रत्येक को निष्क्रिय करता है। इस तरह, चेकबॉक्स मान अभी भी फ़ॉर्म के माध्यम से प्रस्तुत किए जाते हैं (चूंकि उन्हें अक्षम करने से पहले फ़ॉर्म सबमिट किया गया था), और यह उपयोगकर्ता को पृष्ठ को फिर से लोड होने तक बदलने से रोकता है।