अक्षम होने पर <select> फ़ॉर्म फ़ील्ड कैसे सबमिट की जाती है यह सुनिश्चित करने के लिए?

Question

मेरे पास एक selectफॉर्म फ़ील्ड है जिसे मैं "आसानी से" के रूप में चिह्नित करना चाहता हूं, क्योंकि उपयोगकर्ता मूल्य को संशोधित नहीं कर सकता है, लेकिन मूल्य अभी भी फॉर्म के साथ प्रस्तुत किया गया है। disabledविशेषता का उपयोग करना उपयोगकर्ता को मूल्य बदलने से रोकता है, लेकिन फॉर्म के साथ मूल्य जमा नहीं करता है।

readonlyविशेषता के लिए ही उपलब्ध है inputऔर textareaखेतों, लेकिन यह है कि मूल रूप से मैं यही चाहता हूँ। क्या उस काम को पाने का कोई तरीका है?

जिन दो संभावनाओं पर मैं विचार कर रहा हूं उनमें शामिल हैं:

• अक्षम करने के बजाय select, सभी को अक्षम optionकरें और सीएसएस का चयन करने के लिए ग्रे का उपयोग करें ताकि यह उसके विकलांग जैसा दिखे।
• सबमिट बटन पर एक क्लिक ईवेंट हैंडलर जोड़ें, ताकि यह फ़ॉर्म सबमिट करने से पहले सभी अक्षम ड्रॉपडाउन मेनू को सक्षम कर सके।

Comments

देर से शामिल होने के लिए क्षमा करें, लेकिन @ trafalmadorianवर्कस्ट द्वारा प्रदान किए गए समाधान सबसे अच्छे हैं। यह उन सभी इनपुट को निष्क्रिय कर देता है जो चयनित नहीं हैं। यह भी काम करेगा अगर यह चयन कई विकल्प सक्षम है। $('#toSelect')find(':not(:selected)').prop('disabled',true);

— अभिषेक माधनी

वैकल्पिक रूप से, आप UI पर अक्षम के रूप में नियंत्रण छोड़ सकते हैं, लेकिन एक्शन विधि में मान प्राप्त कर सकते हैं: सार्वजनिक ActionResult InsertRecord (MyType मॉडल) {if (model.MyProperty == null) {model.MyProperty = अनुरोध ["MyProperty"]; }}

— बीस्टीबॉय

Answer 1

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

select_nameवह नाम कहां है जो आप सामान्य रूप से देते हैं <select>।

एक अन्य विकल्प।

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

अब इस एक के साथ, मैंने देखा है कि आप किस वेबसर्वर का उपयोग कर रहे हैं, इसके आधार पर आपको hiddenइनपुट पहले या बाद में लगाना पड़ सकता है <select>।

यदि मेरी मेमोरी मुझे सही ढंग से सेवा देती है, तो IIS के साथ, आप इसे पहले डालते हैं, अपाचे के साथ आप इसे डालते हैं। हमेशा की तरह, परीक्षण महत्वपूर्ण है।

Comments

यह वेब सर्वर पर कैसे निर्भर होगा ? क्या यह क्लाइंट नहीं है जो पेज को चुनिंदा क्षेत्र के साथ प्रस्तुत करता है, और इस तरह संघर्ष के मामले में यह ऐसा क्लाइंट होगा जो यह तय करता है कि सर्वर को मूल्य भेजा जाए या नहीं?

— इलारी कजस्ट जूल 22'11

यह इस बात पर निर्भर करता है कि सर्वर एक ही नाम से कई इनपुट कैसे संभालता है।

— जॉर्डन एस। जोन्स

आप बेहतर एक विशिष्ट सर्वर प्रकार पर भरोसा नहीं करेंगे, इसलिए मुझे लगता है कि पहला दृष्टिकोण क्लीनर और कम त्रुटि-प्रवण है ..

— ल्यूक

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

— मैट वैन एंडेल

यह केवल विकल्प है अगर आपको एक ऐसे फॉर्म की आवश्यकता है जो जावास्क्रिप्ट के बिना काम करता है।

— एंड्रयू

Answer 2

फ़ील्ड को अक्षम करें और फिर फ़ॉर्म सबमिट करने से पहले उन्हें सक्षम करें:

jQuery कोड:

jQuery(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

Comments

एक अच्छा समाधान!

— क्रिस

यह वह है जिस पर मैं बस गया था, मुख्यतः क्योंकि यह कम से कम अप्रिय है।

— जोनाथन

jQuery डॉक्स .attr और .removeAttr के बजाय। Check और '।' के लिए .prop और .removeProp का उपयोग करने की सलाह देते हैं, http://api.jquery.com/prop/

— जिम

@ जिमबर्गरमैन की टिप्पणी के प्रासंगिक बिट - "गुण आमतौर पर क्रमबद्ध HTML विशेषता को बदले बिना एक DOM तत्व की गतिशील स्थिति को प्रभावित करते हैं। उदाहरणों में इनपुट तत्वों की मूल्य संपत्ति, इनपुट्स और बटनों की अक्षम संपत्ति या एक चेकबॉक्स की चेक की गई संपत्ति शामिल है। .Prop () विधि का उपयोग .attr () विधि के बजाय अक्षम और जाँच करने के लिए किया जाना चाहिए। मूल्य और प्राप्त करने के लिए .val () विधि का उपयोग किया जाना चाहिए। " - एपि.जेकरी

— जोशुआ डांस

आप जीनियस वन (वाई)

— टॉमीडो

Answer 3

मैं इसके लिए एक समाधान की तलाश में था, और जब से मैंने इस धागे में एक समाधान नहीं ढूंढा मैंने अपना खुद का किया।

// With jQuery
$('#selectbox').focus(function(e) {
    $(this).blur();
});

सरल, आप केवल इस पर ध्यान केंद्रित करते समय फ़ील्ड को धुंधला करते हैं, इसे अक्षम करने जैसा कुछ, लेकिन आप वास्तव में इसका डेटा भेजते हैं।

Comments

वाह बढ़िया और आसान उपाय। धन्यवाद .. +1 मुझ से :)

— नईम उल वहाब

मुझे यह बहुत पसंद है .. मेरे रूप में बातचीत के आधार पर, तत्व सक्षम / अक्षम बैक-एन-आगे हो जाते हैं ... मैं इस परिदृश्य में 'धुंधला' क्षेत्र को फिर से कैसे सक्षम करूं?

— 20

Googling से, $ ('# selectbox') जैसा दिखता है। बंद ('फ़ोकस'); फिर से सक्षम करने की चाल को करेगा

— bkwdesign

टेक्स्ट बॉक्स के लिए काम करता है, चुनिंदा बक्से के लिए काम नहीं करता है, और बटन दबाकर और दबाकर रखने के लिए सुपर आसान है

— एंड्रू

Answer 4

मुझे थोड़ा अलग परिदृश्य का सामना करना पड़ा, इसमें मैं केवल उपयोगकर्ता को पहले के चयन बॉक्स के आधार पर चयनित मूल्य को बदलने की अनुमति नहीं देना चाहता था। मैंने जो काम किया, वह सिलेक्टबॉक्स के अन्य सभी गैर-चयनित विकल्पों का उपयोग करने में अक्षम था

$('#toSelect')find(':not(:selected)').attr('disabled','disabled');

Comments

धन्यवाद, मैंने आपको सबसे तार्किक रूप से सबसे सरल पाया। हालाँकि , के attrसाथ बदल जाना चाहिए prop, कुछ ऐसा दिखेगा$('#toSelect')find(':not(:selected)').prop('disabled',true);

— अभिषेक माधनी

Answer 5

ट्रिक द्वारा jQuery का उपयोग किए बिना एक ही समाधान का सुझाव दिया

<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">

   <select id="mysel" disabled="disabled">....</select>

   <input name="submit" id="submit" type="submit" value="SEND FORM">
</form>

यह किसी को अधिक समझने में मदद कर सकता है, लेकिन स्पष्ट रूप से jQuery के एक की तुलना में कम लचीला है।

Comments

लेकिन, यह कई चयनकर्ताओं के लिए अच्छा नहीं है। क्या हम उपयोग कर सकते हैं getElementsByTagName('select')?

— लकी

Answer 6

यह इसके साथ काम नहीं करता है: चुनिंदा क्षेत्रों के लिए इनपुट चयनकर्ता, इसका उपयोग करें:

    jQuery(function() {

    jQuery('form').bind('submit', function() {
        jQuery(this).find(':disabled').removeAttr('disabled');
    });

    });

Answer 7

मैं चयनों में अक्षम विकल्पों के लिए अगले कोड का उपयोग करता हूं

<select class="sel big" id="form_code" name="code" readonly="readonly">
   <option value="user_played_game" selected="true">1 Game</option>
   <option value="coins" disabled="">2 Object</option>
   <option value="event" disabled="">3 Object</option>
   <option value="level" disabled="">4 Object</option>
   <option value="game" disabled="">5 Object</option>
</select>

// Disable selection for options
$('select option:not(:selected)').each(function(){
 $(this).attr('disabled', 'disabled');
});

Answer 8

सबसे आसान तरीका मुझे अपने फॉर्म से बंधे एक छोटे जावास्क्रिप्ट फ़ंक्शन को बनाना था:

function enablePath() {
    document.getElementById('select_name').disabled= "";
}

और आप इसे अपने फॉर्म में यहाँ कॉल करते हैं:

<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">

या आप इसे उस फ़ंक्शन में कॉल कर सकते हैं जिसका उपयोग आप अपने फॉर्म को जांचने के लिए करते हैं :)

Answer 9

सबमिट करने से पहले बस एक पंक्ति जोड़ें।

$ ( "# XYZ") removeAttr ( "अक्षम")।

Answer 10

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

Answer 11

मैंने एक क्विक (जेक्वेरी ओनली) प्लगइन को व्हिप किया, जो किसी इनपुट को डिसेबल करते समय डेटा फील्ड में वैल्यू सेव करता है। इसका मतलब यह है कि जब तक .prop () या .attr () ... का उपयोग करके फ़ील्ड को प्रोग्रामेटिक रूप से अक्षम किया जा रहा है, तब .val () (.serialize () या .serializeArra () द्वारा मान को हमेशा लौटाया जाएगा। अक्षम होने पर भी मान :)

बेशर्म प्लग: https://github.com/Jezternz/jq-disabled-inputs

Answer 12

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

function changeSelectUserManipulation(obj, disable){
    var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
    disable = disable? !!disable : !$obj.is(':disabled');

    if(disable){
        $obj.prop('disabled', true)
            .after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
    }else{
        $obj.prop('disabled', false)
            .next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
    }
}

changeSelectUserManipulation("select_id");

Comments

'

— ओब्ज

Answer 13

मुझे एक व्यावहारिक समाधान मिला: चयनित को छोड़कर सभी तत्वों को हटा दें। फिर आप शैली को ऐसी चीज़ में बदल सकते हैं जो अक्षम भी दिखती है। JQuery का उपयोग करना:

jQuery(function($) {
    $('form').submit(function(){
        $('select option:not(:selected)', this).remove();
    });
});

Answer 14

<select id="example">
    <option value="">please select</option>
    <option value="0" >one</option>
    <option value="1">two</option>
</select>



if (condition){
    //you can't select
    $("#example").find("option").css("display","none");
}else{
   //you can select
   $("#example").find("option").css("display","block");
}

Answer 15

एक अन्य विकल्प रीडऑनली विशेषता का उपयोग करना है।

<select readonly="readonly">
    ....
</select>

आसानी से मान अभी भी सबमिट किया गया है, इनपुट फ़ील्ड को धूसर कर दिया गया है और उपयोगकर्ता इसे संपादित नहीं कर सकता है।

संपादित करें:

Http://www.w3.org/TR/html401/interact/forms.html#adef-readonly से उद्धृत :

• रीड-ओनली एलिमेंट फोकस प्राप्त करते हैं लेकिन उपयोगकर्ता द्वारा संशोधित नहीं किया जा सकता है।
• केवल-तत्व ही टैबिंग नेविगेशन में शामिल हैं।
• पढ़ें- केवल तत्व ही सफल हो सकते हैं

जब यह कहता है कि तत्व सक्सेसफुल हो सकता है, तो इसका मतलब यह प्रस्तुत किया जा सकता है, जैसा कि यहाँ कहा गया है: http://www.w3.org/TR/html401/interact/forms.html#successful-controls

Comments

नियंत्रण को धूसर नहीं किया जाता है और उपयोगकर्ता इसे संपादित कर सकता है। आप पूरे अनुभाग को पढ़ने में विफल रहे और मैं बोली: "निम्नलिखित तत्व आसानी से विशेषता का समर्थन करते हैं: INPUT और TEXTAREA।"

— कार्लोस रेंडन

मुझे पता है कि यह एक पुराना उत्तर है, लेकिन यह वास्तव में काम करता है। मैं कई डाउनवोट का कारण नहीं जानता।

— ज़ी लुइस