रेडियो बटन "पठनीय" क्यों नहीं हो सकते?

213

मैं एक रेडियो बटन दिखाना चाहता हूं, इसका मूल्य प्रस्तुत किया गया है, लेकिन परिस्थितियों के आधार पर, यह संपादन योग्य नहीं है। अक्षम काम नहीं करता है, क्योंकि यह मूल्य जमा नहीं करता है (या क्या यह?), और यह रेडियो बटन को बाहर निकालता है। केवल-पढ़ने के लिए वास्तव में मैं क्या देख रहा हूं, लेकिन कुछ रहस्यमय कारणों से यह काम नहीं करता है।

क्या कुछ अजीब चाल है जो मुझे केवल पढ़ने के लिए उम्मीद के मुताबिक काम करने के लिए खींचने की आवश्यकता है? क्या मुझे इसके बजाय जावास्क्रिप्ट में करना चाहिए?

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

html  radio-button  readonly 
— MCV
स्रोत
5
"क्या यह एचटीएमएल ऐनक में उन समझ से बाहर चूक है?" इसे उपयोगकर्ता के दृष्टिकोण से सोचें। एक बटन क्यों दिखाते हैं, वे क्लिक नहीं कर सकते?
— पॉल डी। वेट
67
एक बटन क्यों दिखाते हैं, वे क्लिक नहीं कर सकते? क्योंकि मैं चाहता हूं कि उन्हें पता हो कि बटन है, लेकिन मैं नहीं चाहता कि वे अभी इसे क्लिक कर सकें। लेकिन शायद बाद में। यह सब के बाद एक गतिशील रूप है। रेडियो बटन किसी भी अन्य इनपुट क्षेत्र से अलग क्यों होगा?
— mcv
7
यहाँ कल्पना है: w3.org/TR/html401/interact/forms.html#h-17.12.2 "निम्नलिखित तत्व पठनीय विशेषता का समर्थन करते हैं: INPUT और TEXTAREA।" जो स्पष्ट रूप से गलत है। यहाँ वापस, हालांकि, हम एक और अधिक सटीक सारांश देखते हैं: w3.org/TR/WD-forms-970402#readonly "READONLY प्रकार के तत्वों पर लागू होता है TEXT या PASSWORD और TEXTITEA तत्व।" ऐसा लग रहा है कि recs और स्पेक्स के अंतराल के बीच फिसल गया है।
— ग्राफिकडिविन
और भी अधिक उत्सुक। इस प्राचीन दस्तावेज़ के अनुसार "चेकबॉक्स में, उदाहरण के लिए, आप उन्हें चालू या बंद कर सकते हैं (इस प्रकार चेक की गई अवस्था) लेकिन आप फ़ील्ड का मान नहीं बदलते हैं।" ( htmlcodetutorial.com/forms/_INPUT_DISABLED.html ) क्या यह सच है? क्या किसी चेकबॉक्स / रेडियो पर मान को READONLY सेट करना, भले ही उपयोगकर्ता इसे स्पष्ट रूप से बदल सकता है?
— ग्राफिकडिविन
मेरी पोस्ट की जाँच करें [यहाँ] [1] इस मुद्दे को एक साफ सरल समाधान देता है [१]: stackoverflow.com/a/15513256/1861389
— संचालित '20

जवाबों:

149

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

आसानी से बनाने के लिए jQuery का उपयोग:

$(':radio:not(:checked)').attr('disabled', true);

इस दृष्टिकोण ने चुनिंदा सूची को आसानी से बनाने के लिए भी काम किया, सिवाय इसके कि आपको प्रत्येक अन-चयनित विकल्प को अक्षम करना होगा।

— मेगन
स्रोत
2
धन्यवाद @Megan, यह एक महान समाधान है
— माइकल ला
9
इस पर एक भिन्नता आपको readonlyसंपत्ति का उपयोग करने की अनुमति देती है, जैसा कि ओपी ने काम करने की उम्मीद की है:$(':radio[readonly]:not(:checked)').attr('disabled', true);
— wodow
1
नीचे दिए गए समाधानों के बीच, यह समाधान सबसे साफ कोड प्रदान करता है, और Jquery सत्यापनकर्ता के साथ अच्छी तरह से काम करता है क्योंकि मुझे फ़ील्ड को सक्षम / अक्षम करने की आवश्यकता नहीं है, या फॉर्म सबमिट करते समय unbinding क्लिक घटनाओं से निपटने और उन्हें फिर से बाइंड करने की आवश्यकता नहीं है।
— क्रिस्टियान नेरोना
सही ढंग से काम करता है। धन्यवाद
— हसन फारूक
चतुर! उपयोग नहीं। (..), यदि आपके पास पहले से ही चयनित इनपुट फ़ील्ड का एक सेट है: var myRadios = $ ('# विशिष्ट-रेडियो'); myRadios.not ( ': जाँच की') प्रोप ( 'अक्षम', true);। api.jquery.com/not
— जोपीसी
206

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

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

फिडल: http://jsfiddle.net/qqVGu/

— सैम्पसन
स्रोत
3
आपके पहले समाधान के साथ समस्या यह है कि अगर मैं जावास्क्रिप्ट के माध्यम से रेडियोबॉटन को सक्षम करना चाहता हूं, तो मेरे पास अचानक एक ही नाम के साथ दो फ़ील्ड हैं, इसलिए मुझे उनमें से एक को साफ करना होगा। या असली के लिए छिपे हुए का उपयोग करें और रेडियो बटन को केवल छिपे हुए क्षेत्र का मान सेट करें। इसके अलावा, यह सिर्फ एक बिट से अधिक बोझिल है कि मैं एक रेडियोबॉटन बनना चाहता हूं। आपका दूसरा समाधान, हालांकि मुझे संदेह नहीं है कि यह काम करता है, वास्तव में बदसूरत हैक की तरह लगता है। इसलिए मुझे लगता है कि जावास्क्रिप्ट समाधान एकमात्र ऐसा है जो मेरे मानदंडों को पूरा करता है। मैं उसके साथ जाऊँगा।
— mcv
7
समाधान 1 कृपया! यह एकमात्र उचित रूप से सुलभ है। और अगर आपको इसे स्क्रिप्ट करने की आवश्यकता है, तो रेडियो की सक्षमता के विपरीत छिपे हुए क्षेत्र की सक्षमता सेट करने के लिए यह केवल एक और पंक्ति है।
— bobince
5
मैंने अभी देखा कि समाधान 2 और 3 ने जोनाथन के उत्तर में स्थानों को बदल दिया है, इसलिए अब टिप्पणियाँ बहुत मायने नहीं रखती हैं।
— एमसीवी
1
नोटिस करना चाहते हैं कि जावास्क्रिप्ट समाधान काम नहीं किया गया है, यह सिर्फ बटन अनचेक करता है। मुझे लगता है कि onclick="return false"बदलाव को रोकने की जरूरत है ।
— dmitry
2
जब मैं रेडियो "अक्षम" सेट करता हूं तो "अक्षम कर्सर" को हटाने के लिए मैं "शैली = कर्सर: डिफ़ॉल्ट" जोड़ता हूं।
— जोआओ पाउलो
24

यह वह ट्रिक है जिससे आप जा सकते हैं।

<input type="radio" name="name" onclick="this.checked = false;" />
— सरफराज
स्रोत
4
वास्तव में मैं क्या सोच रहा था, यह सबसे अच्छा होगा यदि आप स्पष्ट करें कि यह onClick="this.checked = <%=value%>"कुछ किस्म का होना चाहिए :)
— JustLoren
उसे जानना बड़ा अच्छा है। चेक किए गए या तो सही या गलत मान हो सकते हैं।
— सरफराज
बस एक चेतावनी कि यह उन लोगों के लिए काम नहीं करेगा जो जावास्क्रिप्ट के साथ ब्राउज़ करते हैं डिफ़ॉल्ट रूप से चालू नहीं होते हैं।
— दोपहर
3
मेरे मामले के लिए कोई समस्या नहीं है। हम पहले से ही jQuery और Ajax के टन का उपयोग करते हैं।
— mcv
1
वर्थ नोटिंग आप केवल onclick="return false;"समूह के लिए समान मूल्य रखने के लिए कर सकते हैं
— Zach
12

मेरे पास एक लंबा रूप (250+ फ़ील्ड) है जो एक db पर पोस्ट करता है। यह एक ऑनलाइन रोजगार आवेदन है। जब कोई व्यवस्थापक किसी एप्लिकेशन को देखने जाता है जो दायर किया गया है, तो फॉर्म db से डेटा के साथ पॉप्युलेट होता है। इनपुट टेक्स्ट और टेक्स्टारेस को उनके द्वारा सबमिट किए गए टेक्स्ट से बदल दिया जाता है, लेकिन रेडियो और चेकबॉक्स फॉर्म तत्वों के रूप में रखने के लिए उपयोगी होते हैं। उन्हें अक्षम करना उन्हें पढ़ने में कठिन बनाता है। गलत ऑनक्लिक के लिए .checked प्रॉपर्टी को सेट करने से काम नहीं चलेगा क्योंकि वे ऐप को भरने वाले उपयोगकर्ता द्वारा जांचे जा सकते हैं। किसी भी तरह...

onclick="return false;"

रेडियो 'और' अक्षम करने के लिए एक आकर्षण की तरह काम करता है।

— humbolight
स्रोत
8

सबसे अच्छा उपाय यह है कि जाँच की गई या अनियंत्रित अवस्था (या तो क्लाइंट या सर्वर से) सेट की जाए और वार्ड के बाद उपयोगकर्ता को इसे बदलने न दें (अर्थात इसे आसानी से करें) निम्नलिखित करें:

<input type="radio" name="name" onclick="javascript: return false;" />
— Vipresh
स्रोत
नहीं! इस स्थिति में, उपयोगकर्ता ब्राउज़र में html को संपादित कर सकता है, चयनित के रूप में आवश्यक विकल्प को चिह्नित कर सकता है और फॉर्म को पोस्ट कर सकता है।
— त्रुटि 1009
2

मैं एक जावास्क्रिप्ट-भारी तरीके से चेक बॉक्स और रेडियो बटन के लिए आसानी से राज्य प्राप्त करने के लिए आया हूं। यह फ़ायरफ़ॉक्स, ओपेरा, सफारी, Google क्रोम के वर्तमान संस्करणों के साथ-साथ IE के वर्तमान और पिछले संस्करणों (IE7 के नीचे) के खिलाफ परीक्षण किया गया है।

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

मुझे यकीन नहीं है कि मुझे स्रोत कोड यहां पोस्ट करने की अनुमति है, क्योंकि मैंने कंपनी के लिए काम करते समय इसे विकसित किया है, लेकिन मैं निश्चित रूप से अवधारणाओं को साझा कर सकता हूं।

Onmousedown ईवेंट्स के साथ, आप क्लिक एक्शन बदलने से पहले चयन स्थिति पढ़ सकते हैं। इसलिए आप इस जानकारी को संग्रहीत करते हैं और फिर इन राज्यों को एक ऑनक्लिक ईवेंट के साथ पुनर्स्थापित करते हैं।

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

इस का जावास्क्रिप्ट हिस्सा तब इस तरह काम करेगा (फिर से केवल अवधारणाएं):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

अब आप इनपुट तत्वों के ऑन्कलिक और ऑनमॉस्डाउन गुणों को बदलकर रेडियो बटन / चेकबॉक्स को सक्षम / अक्षम कर सकते हैं।

— टॉम
स्रोत
2

गैर-चयनित रेडियो बटन के लिए, उन्हें अक्षम के रूप में चिह्नित करें। यह उन्हें उपयोगकर्ता इनपुट का जवाब देने और चेक किए गए रेडियो बटन को साफ करने से रोकता है। उदाहरण के लिए:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>
— dpolican
स्रोत
4
checked="yes"? वह क्या युक्ति है? मूल्य के बिना checked="checked"या तो उपयोग या केवल विशेषता checked। उसी के लिए disabled।
— रॉबिन वैन बालन
2

जावास्क्रिप्ट तरीका - यह मेरे लिए काम किया।

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

कारण:

  1. $('#YourTableId').find('*') -> यह सभी टैग लौटाता है।

  2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); इसमें कैप्चर की गई सभी ऑब्जेक्ट्स पर पुनरावृत्तियाँ और इनपुट टैग्स को अक्षम करें।

विश्लेषण (डिबगिंग):

  1. form:radiobutton आंतरिक रूप से "इनपुट" टैग माना जाता है।

  2. यदि आप मुद्रण का प्रयास करते हैं, तो उपरोक्त फ़ंक्शन () की तरह document.write(this.tagName);

  3. जहाँ भी, टैग में यह रेडियो बटन पाता है, यह एक इनपुट टैग देता है।

तो, उपरोक्त कोड लाइन को इनपुट के साथ * प्रतिस्थापित करके, रेडियो बटन टैग के लिए और अधिक अनुकूलित किया जा सकता है: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

— user3702798
स्रोत
1

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

— wintermute
स्रोत
1

मैंने पाया कि उपयोग onclick='this.checked = false;'कुछ हद तक काम करता है। एक रेडियो बटन जिसे क्लिक किया गया था उसे नहीं चुना जाएगा। हालाँकि, यदि एक रेडियो बटन था जो पहले से ही चुना गया था (जैसे, एक डिफ़ॉल्ट मान), तो वह रेडियो बटन अचयनित हो जाएगा।

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

इस परिदृश्य के लिए, अकेले डिफ़ॉल्ट मान को छोड़ना और अन्य रेडियो बटन को अक्षम करना पहले से चयनित रेडियो बटन को संरक्षित करता है और इसे अचयनित होने से रोकता है।

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

यह समाधान डिफ़ॉल्ट मान को बदलने से रोकने का सबसे सुरुचिपूर्ण तरीका नहीं है, लेकिन यह काम करेगा कि जावास्क्रिप्ट सक्षम है या नहीं।

— JW8
स्रोत
1

विशेषता आज़माएं disabled, लेकिन मुझे लगता है कि आपको रेडियो बटन का मूल्य नहीं मिलेगा। या इसके बजाय छवियों को सेट करें:

<img src="itischecked.gif" alt="[x]" />radio button option

सादर।

— टिम
स्रोत
1
ओह, मेरा html कोड छीन लिया गया था: img src = "itIsChecked.gif" alt = "[x]" OptionChecked
— Tim
0

मैं एक जेएस प्लगइन का उपयोग कर रहा हूं जो चेकबॉक्स / रेडियो इनपुट तत्वों को स्टाइल करता है और एक 'रीडऑनली स्टेट' स्थापित करने के लिए निम्न jQuery का उपयोग करता है जहां अंतर्निहित मूल्य अभी भी पोस्ट किया गया है, लेकिन इनपुट तत्व उपयोगकर्ता के लिए अप्राप्य दिखाई देता है, जो मेरा मानना ​​है कि इसका इरादा कारण है हम एक आसानी से इनपुट विशेषता का उपयोग करेंगे ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}
— chopstik
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.