HTML फॉर्म आसानी से चयन टैग / इनपुट

Question

HTML चश्मे के अनुसार, HTML में selectटैग की readonlyविशेषता नहीं है , केवल एक disabledविशेषता है। इसलिए यदि आप उपयोगकर्ता को ड्रॉपडाउन को बदलने से रोकना चाहते हैं, तो आपको इसका उपयोग करना होगा disabled।

एकमात्र समस्या यह है कि अक्षम HTML फॉर्म इनपुट POST / GET डेटा में शामिल नहीं होते हैं।

readonlyएक selectटैग के लिए विशेषता का अनुकरण करने का सबसे अच्छा तरीका क्या है , और अभी भी POST डेटा प्राप्त करना है?

Comments

सर्वर साइड के लिए उस पर भरोसा न करें। कोई भी व्यक्ति अपना HTML पेज बना सकता है और उसे RW बना सकता है।

— ब्रेंडन बायर्ड

लेकिन यह एक PHP- विशिष्ट प्रश्न नहीं है।

— कालेब ब्रसे

मैं इस मामले में एक चुनिंदा तत्व का उपयोग नहीं करने का सुझाव दूंगा। क्या कोई कारण है कि आप केवल सादे पाठ के रूप में मूल्य प्रदर्शित नहीं कर सकते हैं?

— बिग मैकलेरज्यूज

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

— बिग मैक्लेरजैग

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

— पिओट्र कुला

Answer 1

आपको selectतत्व रखना चाहिए disabledलेकिन एक inputही नाम और मूल्य के साथ एक और छिपा हुआ भी जोड़ना चाहिए ।

यदि आप अपने चयन को फिर से उपयोग करते हैं, तो आपको उसके मूल्य को ऑनकॉन्ग इवेंट में छिपे इनपुट पर कॉपी करना चाहिए और छिपे हुए इनपुट को अक्षम (या हटाना) करना चाहिए।

यहाँ एक डेमो है:

$('#mainform').submit(function() {
    $('#formdata_container').show();
    $('#formdata').html($(this).serialize());
    return false;
});

$('#enableselect').click(function() {
    $('#mainform input[name=animal]')
        .attr("disabled", true);
    
    $('#animal-select')
        .attr('disabled', false)
    	.attr('name', 'animal');
    
    $('#enableselect').hide();
    return false;
});

#formdata_container {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form id="mainform">
        <select id="animal-select" disabled="true">
            <option value="cat" selected>Cat</option>
            <option value="dog">Dog</option>
            <option value="hamster">Hamster</option>
        </select>
        <input type="hidden" name="animal" value="cat"/>
        <button id="enableselect">Enable</button>
        
        <select name="color">
            <option value="blue" selected>Blue</option>
            <option value="green">Green</option>
            <option value="red">Red</option>
        </select>

        <input type="submit"/>
    </form>
</div>

<div id="formdata_container" style="display:none">
    <div>Submitted data:</div>
    <div id="formdata">
    </div>
</div>

Comments

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

— एडम

@ मोम आह! ठीक है, वह भी काम करता है। मैंने तब से मान लिया था जब यो ने कहा था कि छिपे हुए इनपुट में "एक ही नाम" होना चाहिए कि चयन में एक नाम था।

— एडम

अगर मैं एक बहु का चयन कर रहा हूँ तो क्या होगा?

— Anyul Rivas

एक ही नाम वाले दो तत्व केवल अंतिम सक्षम इनपुट / पोस्ट को वापस पोस्ट करेंगे, दोहरे नहीं। इसके अलावा, केवल selectedमूल्य वापस पूरी सूची में नहीं मिलता है। तो, आपका आपके hiddenसामने बैठता है selectऔर चयनित मूल्य रखता है। यदि चयन "आसानी से" के लिए अक्षम हो जाता है, तो पोस्ट बैक में केवल छिपे हुए इनपुट का मूल्य होगा। यदि चयन सक्षम है, तो दृश्यमान चयनित विकल्प छिपे हुए मूल्य को "ओवर राइट / रिप्लेस" करेगा, और यही वह मूल्य है जो वापस पोस्ट हो जाएगा।

— पियोट कुला

जबकि यह स्पष्ट समाधान है, यह एक समाधान के रूप में बेकार है, क्योंकि आपको एक और इनपुट फ़ील्ड जोड़ना है।

— डोनाटो

Answer 2

हम भी इस का उपयोग कर सकते हैं

चयनित विकल्प को छोड़कर सभी को अक्षम करें:

<select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

इस तरह से ड्रॉपडाउन अभी भी काम करता है (और इसके मूल्य को जमा करता है) लेकिन उपयोगकर्ता दूसरे मूल्य का चयन नहीं कर सकता है।

डेमो

Comments

डायनामिक विकल्प के लिए अच्छा है

— डिएगो फेवरो

एकल-मूल्य चयनित टैग के लिए बिल्कुल सही! लेकिन एक <select multiple> के लिए काम नहीं करेगा, जो अभी भी उपयोगकर्ताओं को कुछ चयनित विकल्पों को रद्द करने की अनुमति देगा, इस प्रकार मूल्य को बदल देगा।

— मिखाइल बंकिन

optionटैग की disabledविशेषता के लिए ब्राउज़र समर्थन

— जो।

यह एक बेहतरीन उपाय है। मैं जोड़ता हूँ कि आप इसे jQuery के साथ आसानी से प्राप्त कर सकते हैं: $("#yourSelectId option:not(:selected)).attr("disabled", "disabled")

— Onkel-j

Answer 3

आप सबमिट पर चयन वस्तु को फिर से सक्षम कर सकते हैं।

संपादित करें : अर्थात, सामान्य रूप से चयनित टैग (अक्षम विशेषता के साथ) को अक्षम करना और फिर फ़ॉर्म को सबमिट करने से पहले इसे स्वचालित रूप से फिर से सक्षम करना:

JQuery के साथ उदाहरण:

• इसे अक्षम करने के लिए:

  $('#yourSelect').prop('disabled', true);

• प्रस्तुत करने से पहले इसे फिर से सक्षम करने के लिए ताकि GET / POST डेटा शामिल हो:

  $('#yourForm').on('submit', function() {
      $('#yourSelect').prop('disabled', false);
  });

इसके अलावा, आप हर अक्षम इनपुट को फिर से सक्षम या चुन सकते हैं:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

Comments

अक्षम संपत्ति सेट करने के लिए .prop ('अक्षम', सही / गलत) का उपयोग करें। विशेषता वास्तविक स्थिति को नहीं बदलेगी।

— पेरिस चार

मुझे लगता है कि यह समाधान @bezmax समाधान से अधिक चतुर है । क्योंकि यदि हम छिपे हुए इनपुट को जोड़ते हैं, तो हमें विचार करना होगा कि किसी भी समय केवल एक इनपुट (एक ही नाम) सक्षम था। अन्यथा, यदि दोनों इनपुट सक्षम थे, सर्वर साइड में, प्रोग्राम इनपुट की सरणी लेगा जो अपवाद का कारण बन सकता है (उदाहरण के लिए यदि हम इस स्थिति को नहीं संभालते हैं, और हम एक स्ट्रिंग की उम्मीद करते हैं और 'Request.Form [FieldName] का उपयोग करते हैं 'कमांड)

— MiT

@ केविन, काम करता है> 90% मामले। इसके अलावा, आपको अपनी बेल्ट में jquery रखना होगा ... एह।

— १

यह स्वीकृत उत्तर को ज्यादा साफ करता है। तर्क को पूर्ववत् करना आसान अगर आप चाहते हैं कि तत्व अब और अक्षम न हो और कोई अतिरिक्त इनपुट टैग न हो।

— होहमारू

Answer 4

किसी तत्व को readOnlyकरने का एक और तरीका selectहै उपयोग करनाcss

आप ऐसा कर सकते हैं:

$('#selection').css('pointer-events','none');

डेमो

Comments

अच्छा समाधान। लेकिन आप फिर भी कीबोर्ड से मान बदल सकते हैं।

— मारियो वर्नर

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

— पायोटर कुला

काफी अपरंपरागत !! यदि पृष्ठ रेंडर से चयन को अवरुद्ध करने की आवश्यकता है, तो... .on('mouseover', function(){ ... });

— Fr0zenFyr

pointer-events: noneमाउस कर्सर से फोकस को रोकता है। कीबोर्ड से फ़ोकस को रोकने के लिए, आप सभी फ़ोकस इवेंट्स पर तुरंत $('select').css('pointer-events', 'none').on('focus', function () {$(this).blur();});

— ब्लर

Answer 5

<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>

आईई 6, 7 और 8 बी 2, फायरफॉक्स 2 और 3, ओपेरा 9.62, सफारी 3.2.1 में विंडोज और गूगल क्रोम के लिए परीक्षण और काम कर रहा है।

Comments

इसके साथ समस्या यह है कि ड्रॉपडाउन का प्रतिपादन किया गया है जैसे कि यह आसानी से नहीं किया गया था। यूजर सोचेंगे कि काम नहीं करता ...

— लुकास ईडर

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

— दाना

मुझे एक समान समस्या थी और इसे केवल चयनित विकल्प प्रदर्शित करने से हल किया गया। कोई JS की आवश्यकता, उपयोगकर्ता के लिए कम भ्रम ... <select id="countries"> <option value="7" selected="selected">Country7</option> </select>

— Potherca

@ppumkin @dana @LukasEder नहीं .. नहीं तो आप इस UX को ठीक कर सकते हैं। उदाहरण के लिए, आप onchange = 'this.selectedIndex=this.defaultIndex; alert("You should not change this..");'चुनिंदा सूचकांक को चुपचाप बदलने के बजाय कुछ ऐसा कर सकते हैं ..

— Fr0zenFyr

@LukasEder प्रतिवादी अनुभव के बारे में किसी के लिए, वे वास्तव में इस बात पर जोर देने के लिए कुछ सीएसएस जोड़ सकते हैं कि ड्रॉप डाउन को बदला नहीं जाना चाहिए। कर्सर को not-allowedपृष्ठभूमि-रंग में सेट करें #CCC।

— अलेक्जेंडर डिक्सन

Answer 6

सरल jQuery के समाधान

यदि आपके चयन में readonlyकक्षा है तो इसका उपयोग करें

jQuery('select.readonly option:not(:selected)').attr('disabled',true);

या यह कि यदि आपके चयन में readonly="readonly"विशेषता है

$('select[readonly="readonly"] option:not(:selected)').attr('disabled',true);

Comments

कृपया अपने कोड को थोड़ा स्पष्ट करें। क्या हमें चुनिंदा तत्वों में एक 'आसानी से' वर्ग जोड़ना है? हमें इस कोड को कब कॉल करना है: केवल दस्तावेज़ में। पहले से या हर बार एक चयन सक्षम / अक्षम है? क्या आपका कोड सुरक्षित है?

— अनार खलीलोव 9:14

$(document).ready(function(){$('select option:not(:selected)').attr('disabled',true);});एकल चयन पर ठीक काम करता है। कोई "आसानी से" कक्षा की आवश्यकता नहीं है। मल्टीपल सिलेक्ट इस बात में समस्याग्रस्त है कि अगर पहले से चुने हुए एक से अधिक ऑप्शन हैं और इसलिए डिसेबल नहीं हैं और एक यूजर एक नहीं कई ऑप्शंस को सेलेक्ट करता है, तो दूसरे पहले से चुने हुए ऑप्शन्स अचयनित हो जाते हैं।

— जॉर्डन

इसका कोई मतलब नहीं समझे।

— पियोट कुला

यह "पठनीय" वर्ग के साथ चयनित बक्से के अलावा अन्य विकल्पों को निष्क्रिय करता है। यदि आपके पास हाथ में चुनिंदा तत्व हैं, तो आप लिख सकते हैं:$select.find('option').not(':selected').attr('disabled', 'disabled');

— सेमरा

मुझे यह समाधान पसंद है। मैं चयनकर्ता को बदल दूंगा select[readonly]ताकि आप केवल तत्व में आसानी से विशेषता जोड़ दें - इस तरह से आपको किसी अन्य प्रकार की तुलना में अलग तरीके से चयन करने की आवश्यकता नहीं है। तब जावास्क्रिप्ट उत्तरोत्तर प्रभाव को बढ़ाता है। ध्यान रखें कि यह समाधान (और अधिकांश अन्य) केवल उपयोगकर्ता एजेंट को सर्वश्रेष्ठ उपयोगकर्ता अनुभव प्रदान करने में मदद करता है - यह वास्तव में कुछ भी लागू नहीं करता है (यदि आवश्यक हो तो सर्वर-साइड किया जाना चाहिए)।

— jgivoni

Answer 7

सरल सीएसएस समाधान:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

इसके परिणामस्वरूप होवर पर "अच्छा" अक्षम "कर्सर के साथ ग्रे होने का चयन करें
और विकल्पों की सूची का चयन करें" खाली "" ताकि आप इसके मूल्य को बदल नहीं सकें।

Comments

यदि आपके पास CSRF सत्यापन है (जैसे सिम्फनी और कई अन्य रूपरेखाओं में), तो यह काम नहीं करेगा।

— ThEBiShOp

Answer 8

फिर भी एक और अधिक समकालीन विकल्प (जिसका कोई उद्देश्य नहीं है) चयनित तत्व के सभी विकल्पों को फिर से चयनित करने के लिए अक्षम करना है।

ध्यान दें कि यह एक HTML 4.0 सुविधा है और 6,7,8 बीटा 1 इस का सम्मान नहीं करता है।

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

Answer 9

यह सबसे अच्छा समाधान है जो मैंने पाया है:

$("#YourSELECTIdHere option:not(:selected)").prop("disabled", true);

उपरोक्त कोड अन्य सभी विकल्पों को अक्षम करता है जो चयनित विकल्प को सक्षम रखते हुए चयनित नहीं हैं। ऐसा करने पर चयनित विकल्प पश्च-पश्च डेटा में आ जाएगा।

Answer 10

मुझे पता है कि यह बहुत देर हो चुकी है, लेकिन यह सरल सीएसएस के साथ किया जा सकता है:

select[readonly] option, select[readonly] optgroup {
    display: none;
}

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

कोई जावास्क्रिप्ट हैक की जरूरत है।

Comments

अच्छा और सरल। मुझें यह पसंद है।

— जोनाथन पैरेंट लेवेस्क

यह समस्या का एक बहुत अच्छा समाधान है। धन्यवाद!

— ओडरवेट

Answer 11

अभी भी आसान है: अपने चयन टैग में शैली विशेषता जोड़ें :

style="pointer-events: none;"

Comments

मेरे लिए इसका काम लेकिन पॉइंटर इवेंट क्रॉस ब्राउज़र को सपोर्ट करेंगे?

— अभिजीत जगताप

यह काम नहीं करेगा। उपयोगकर्ता कीबोर्ड का उपयोग करके इनपुट को बदल सकता है।

— संधू

Answer 12

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

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});

Comments

आपको यहां कीप एड कीडाउन को जोड़ना चाहिए साथ ही ड्रॉपडाउन अभी भी इसमें "टैबिंग" द्वारा उपलब्ध है और मान को बदलने के लिए एरो कीज का उपयोग करें।

— एपीएफ

Answer 13

जब आप केवल पढ़ने के लिए योजना बनाते हैं, तो चयनित अक्षम सेट करें और फिर फ़ॉर्म सबमिट करने से पहले अक्षम विशेषता को हटा दें।

// global variable to store original event/handler for save button
var form_save_button_func = null;

// function to get jQuery object for save button
function get_form_button_by_id(button_id) {
    return jQuery("input[type=button]#"+button_id);
}

// alter value of disabled element
function set_disabled_elem_value(elem_id, value)  {
    jQuery("#"+elem_id).removeAttr("disabled");
    jQuery("#"+elem_id).val(value);
    jQuery("#"+elem_id).attr('disabled','disabled');
}

function set_form_bottom_button_save_custom_code_generic(msg) {
    // save original event/handler that was either declared
    // through javascript or html onclick attribute
    // in a global variable
    form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.6
    //form_save_button_func = get_form_button_by_id('BtnSave').prop('onclick'); // jQuery 1.7

    // unbind original event/handler (can use any of following statements below)
    get_form_button_by_value('BtnSave').unbind('click');
    get_form_button_by_value('BtnSave').removeAttr('onclick');

    // alternate save code which also calls original event/handler stored in global variable
    get_form_button_by_value('BtnSave').click(function(event){
        event.preventDefault();
        var confirm_result = confirm(msg);
        if (confirm_result) {
            if (jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").length > 0) {
                jQuery("form.anyForm").find('input[type=text], textarea, select').filter(".disabled-form-elem").removeAttr("disabled");
            }

            // disallow further editing of fields once save operation is underway
            // by making them readonly
            // you can also disallow form editing by showing a large transparent
            // div over form such as loading animation with "Saving" message text
            jQuery("form.anyForm").find('input[type=text], textarea, select').attr('ReadOnly','True');

            // now execute original event/handler
            form_save_button_func();
        }
    });
}

$(document).ready(function() {
    // if you want to define save button code in javascript then define it now

    // code below for record update
    set_form_bottom_button_save_custom_code_generic("Do you really want to update this record?");
    // code below for new record
    //set_form_bottom_button_save_custom_code_generic("Do you really want to create this new record?");

    // start disabling elements on form load by also adding a class to identify disabled elements
    jQuery("input[type=text]#phone").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("input[type=text]#fax").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("select#country").addClass('disabled-form-elem').attr('disabled','disabled');
    jQuery("textarea#address").addClass('disabled-form-elem').attr('disabled','disabled');

    set_disabled_elem_value('phone', '123121231');
    set_disabled_elem_value('fax', '123123123');
    set_disabled_elem_value('country', 'Pakistan');
    set_disabled_elem_value('address', 'address');

}); // end of $(document).ready function

Comments

ऐसा लगता है कि दौड़ की स्थिति होने की प्रतीक्षा कर रहा है।

— ब्रेंडन बर्ड

Answer 14

उन विकल्पों को अक्षम करने के अलावा जो चयन योग्य नहीं होने चाहिए, मैं वास्तव में उन्हें सूची से अलग करना चाहता था, लेकिन फिर भी उन्हें सक्षम करने में सक्षम होना चाहिए:

$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);

यह सभी चुनिंदा तत्वों को एक आसानी से विशेषता के साथ पाता है, फिर उन चयनों के अंदर सभी विकल्प ढूंढता है जो चयनित नहीं हैं, फिर यह उन्हें छुपाता है और उन्हें निष्क्रिय करता है।

प्रदर्शन कारणों से 2 में jquery क्वेरी को अलग करना महत्वपूर्ण है, क्योंकि jquery उन्हें दाएं से बाएं, कोड को पढ़ता है:

$("select[readonly] option:not(:selected)")

पहले दस्तावेज़ में सभी अचयनित विकल्प मिलेंगे और फिर उन लोगों को फ़िल्टर करें जो एक रीडायनली विशेषता के साथ चयन के अंदर हैं।

Comments

शायद .prop("disabled", true)इसके बजाय

— सैम

Answer 15

एक सरल सर्वर-साइड दृष्टिकोण को छोड़कर सभी विकल्पों को हटाना है जिसे आप चुनना चाहते हैं। इस प्रकार, Zend फ्रेमवर्क 1.12 में, यदि $ तत्व एक Zend_Form_Element_Select है:

 $value =  $element->getValue();
 $options = $element->getAttrib('options');
 $sole_option = array($value => $options[$value]);
 $element->setAttrib('options', $sole_option);

Answer 16

यदि आप किसी प्रपत्र फ़ील्ड को अक्षम करते हैं, तो यह सबमिट नहीं किया जाएगा जब फ़ॉर्म सबमिट किया जाएगा। तो अगर आप की जरूरत है readonlyकि एक की तरह काम करता है, disabledलेकिन यह मान भेजने:

किसी तत्व के पठनीय गुणों में किसी भी परिवर्तन के बाद।

$('select.readonly option:not(:selected)').attr('disabled',true);

$('select:not([readonly]) option').removeAttr('disabled');

Answer 17

टैबइंडेक्स के साथ समाधान। चुनिंदा लेकिन पाठ इनपुट के साथ काम करता है।

बस .disabled वर्ग का उपयोग करें।

सीएसएस:

.disabled {
    pointer-events:none; /* No cursor */
    background-color: #eee; /* Gray background */
}

जे एस:

$(".disabled").attr("tabindex", "-1");

HTML:

<select class="disabled">
    <option value="0">0</option>
</select>

<input type="text" class="disabled" />

---

संपादित करें: इंटरनेट एक्सप्लोरर के साथ, आपको यह JS भी चाहिए:

$(document).on("mousedown", ".disabled", function (e) {
    e.preventDefault();
});

Answer 18

ग्रांट वैगनर्स के सुझाव पर निम्नलिखित; यहाँ एक jQuery स्निपेट है, जो प्रत्यक्ष onXXX विशेषताओं के बजाय हैंडलर फ़ंक्शन के साथ करता है:

var readonlySelect = function(selector, makeReadonly) {

    $(selector).filter("select").each(function(i){
        var select = $(this);

        //remove any existing readonly handler
        if(this.readonlyFn) select.unbind("change", this.readonlyFn);
        if(this.readonlyIndex) this.readonlyIndex = null;

        if(makeReadonly) {
            this.readonlyIndex = this.selectedIndex;
            this.readonlyFn = function(){
                this.selectedIndex = this.readonlyIndex;
            };
            select.bind("change", this.readonlyFn);
        }
    });

};

Answer 19

मैंने इसे jquery के साथ हल किया:

      $("select.myselect").bind("focus", function(){
        if($(this).hasClass('readonly'))
        {
          $(this).blur();   
          return;
        }
      });

Comments

यह बहुत अच्छी तरह से काम किया, हालांकि माउसओवर एनीमेशन अभी भी एक ड्रॉपडाउन तीर दिखाएगा जो क्लिक करने योग्य दिखता है।

— जॉनक्ल

यह मेरे लिए Chrome 26 में काम नहीं कर रहा है: चयन अभी भी पूरी तरह कार्यात्मक है।

— एंडी

लेकिन यह तब भी सूची दिखाता है जब आप IE पर डबल क्लिक करते हैं। वैसे भी उसे रोकने के लिए?

— user1995781

Answer 20

यदि आप jquery सत्यापन का उपयोग कर रहे हैं, तो आप निम्न कार्य कर सकते हैं, मैंने एक समस्या के बिना अक्षम विशेषता का उपयोग किया:

$(function(){
    $('#myform').validate({
        submitHandler:function(form){
            $('select').removeAttr('disabled');
            form.submit();
        }
    });
});

Answer 21

मैंने जो पाया वह महान कार्य करता है, सादे जावास्क्रिप्ट के साथ (अर्थात: कोई JQuery लाइब्रेरी की आवश्यकता नहीं है), <select>टैग के आंतरिक HTML को वांछित एकल शेष मान में बदलना है ।

इससे पहले:

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

नमूना जावास्क्रिप्ट:

document.getElementById('day').innerHTML = '<option>FRI</option>';

उपरांत:

<select name='day' id='day'>
  <option>FRI</option>
</select>

इस तरह, कोई विज़ुअल प्रभाव नहीं बदलता है, और इसके भीतर POST / GET होगा <FORM>।

Answer 22

चयन के बजाय, आप वर्तमान में चयनित विकल्प को छोड़कर सभी विकल्पों को अक्षम कर सकते हैं। यह काम करने वाले ड्रॉप-डाउन की उपस्थिति देता है, लेकिन केवल वह विकल्प जिसे आप पास करना चाहते हैं, एक वैध चयन है।

Comments

सिद्धांत रूप में एक महान विचार - लेकिन IE8 से पहले IE में अक्षम विकल्पों के लिए कोई समर्थन नहीं है। tinyurl.com/yle4bto

— scunliffe

Answer 23

html समाधान:

<select onfocus="this.blur();">

जावास्क्रिप्ट वाले:

selectElement.addEventListener("focus", selectElement.blur, true); selectElement.attachEvent("focus", selectElement.blur); //thanks, IE

हटाना:

selectElement.removeEventListener("focus", selectElement.blur, true); selectElement.detachEvent("focus", selectElement.blur); //thanks, IE

संपादित करें: हटाए गए तरीकों को जोड़ा

Comments

@ButtleButkus जावास्क्रिप्ट वाले काम करते हैं? मैं लगता है कि यह आप issue.have ब्राउज़र संबंधित हो सकता है तत्व के लिए एक tabindex जोड़ने की कोशिश की

— Kadmillos

Answer 24

बस, फॉर्म सबमिट करने से पहले विकलांग विशेषता को हटा दें।

    $('form').submit(function () {
        $("#Id_Unidade").attr("disabled", false);
    });

Answer 25

<select id="case_reason" name="case_reason" disabled="disabled">

disabled="disabled" ->डेटाबेस से अपना मान प्राप्त करेंगे, इसे फॉर्म में दिखाएं। readonly="readonly" ->आप चयन बॉक्स में अपना मूल्य बदल सकते हैं, लेकिन आपका मूल्य आपके डेटाबेस में नहीं बचा सकता है।

Comments

गलत है, यह बच गया है। ऐसा लगता है कि 'पठनीय' संपत्ति सभी ब्राउज़रों द्वारा संसाधित नहीं है और इस प्रकार अविश्वसनीय है।

— richey

Answer 26

यदि चयन ड्रॉपडाउन जन्म के बाद से ही पढ़ा जाता है और इसे बिल्कुल बदलने की आवश्यकता नहीं है, तो शायद आपको इसके बजाय किसी अन्य नियंत्रण का उपयोग करना चाहिए? एक साधारण <div>(प्लस हिडन फॉर्म फील्ड) की तरह या एक <input type="text">?

जोड़ा गया: यदि ड्रॉपडाउन हर समय नहीं पढ़ा जाता है और इसे सक्षम / अक्षम करने के लिए जावास्क्रिप्ट का उपयोग किया जाता है, तो यह अभी भी एक समाधान है - बस DOM ऑन-द-फ्लाई को संशोधित करें।

Comments

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

— ०५:०६ पर Jrgns

फिर शायद आप इस ड्रॉपडाउन को टेक्स्ट-ऑन-फ्लाई के साथ बदल सकते हैं?

— विल्क्स-

हाँ, लेकिन हमेशा वहाँ छिपा इनपुट मेरी राय में अधिक सुरुचिपूर्ण है

— Jrgns

Answer 27

नीचे मेरे लिए काम किया:

$('select[name=country]').attr("disabled", "disabled"); 

Comments

FYI करें: अक्षम फ़ॉर्म फ़ील्ड को सबमिट में शामिल नहीं किया जाएगा।

— mz_01

Answer 28

मैंने इसे चुनिंदा बॉक्स को छिपाकर और spanइसकी जगह केवल सूचनात्मक मूल्य के साथ दिखाया । .readonlyवर्ग को अक्षम करने की स्थिति में , हमें .toVanishतत्वों को हटाने और .toShowलोगों को दिखाने की भी आवश्यकता है।

 $( '.readonly' ).live( 'focus', function(e) {
                $( this ).attr( 'readonly', 'readonly' )
                if( $( this ).get(0).tagName == 'SELECT' ) {
                    $( this ).before( '<span class="toVanish readonly" style="border:1px solid; padding:5px">' 
                            + $( this ).find( 'option:selected' ).html() + '</span>' )
                    $( this ).addClass( 'toShow' )
                    $( this ).hide()
            }
    });

Answer 29

IE में मैं डबल क्लिक करके onfocus => onblur दृष्टिकोण को हराने में सक्षम था। लेकिन मूल्य को याद रखना और फिर इसे ऑनकॉन्ग इवेंट में पुनर्स्थापित करना उस मुद्दे को संभालना प्रतीत होता है।

<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>

आप एक जावास्क्रिप्ट चर का उपयोग करके विस्तारक गुणों के बिना भी ऐसा ही कर सकते हैं।

Answer 30

यहां कार्यक्षमता प्राप्त करने के लिए एक कस्टम jQuery फ़ंक्शन का उपयोग करने का प्रयास किया गया है (जैसा कि यहां बताया गया है):

$(function(){

 $.prototype.toggleDisable = function(flag) {
    // prepare some values
    var selectId = $(this).attr('id');
    var hiddenId = selectId + 'hidden';
    if (flag) {
      // disable the select - however this will not submit the value of the select
      // a new hidden form element will be created below to compensate for the 
      // non-submitted select value 
      $(this).attr('disabled', true);

      // gather attributes
      var selectVal = $(this).val();
      var selectName = $(this).attr('name');

      // creates a hidden form element to submit the value of the disabled select
      $(this).parents('form').append($('<input></input>').
        attr('type', 'hidden').
        attr('id', hiddenId).
        attr('name', selectName).
        val(selectVal) );
    } else {
      // remove the newly-created hidden form element
      $(this).parents('form').remove(hiddenId);
      // enable back the element
      $(this).removeAttr('disabled');
    }
  }

  // Usage
  // $('#some_select_element').toggleDisable(true);
  // $('#some_select_element').toggleDisable(false);

});