कैसे jquery का उपयोग कर एक ड्रॉपडाउन आसानी से बनाने के लिए?

Question

मैं निम्नलिखित कथन का उपयोग इसे आसानी से करने के लिए कर रहा हूं लेकिन यह काम नहीं कर रहा है।

$('#cf_1268591').attr("readonly", "readonly"); 

मैं इसे अक्षम नहीं करना चाहता, मैं इसे आसानी से बनाना चाहता हूं।

Comments

एक पठनीय गिरावट और एक मानक गिरावट के बीच क्या अंतर होगा?

— सिंह

एक नियंत्रण स्थापित

— Blazemonger

क्या यह वास्तव में एक jQuery मुद्दा है? या शायद ड्रॉपडाउन सिर्फ आसानी से विशेषता के साथ काम नहीं करता है?

— इलिया जी

कनिष्क पानमलडनिया ने पहले ही आपको सही उत्तर दे दिया है (टिप्पणी के बजाय इसका उत्तर देना चाहिए)।

— क्यूबेंटेक

ड्रॉपडाउन हमेशा केवल पढ़ने के लिए नहीं है। केवल-पढ़ने का मतलब है कि आप इसका मूल्य देख सकते हैं लेकिन इसे बदल नहीं सकते।

— सनकैट २२

Answer 1

$('#cf_1268591').attr("disabled", true); 

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

यदि आप किसी फ़ॉर्म के साथ काम करते हैं, तो अक्षम फ़ील्ड सबमिट नहीं होते हैं, इसलिए अक्षम ड्रॉपडाउन मान को संग्रहीत करने के लिए एक छिपे हुए फ़ील्ड का उपयोग करें

Comments

एक ड्रॉपडाउन अक्षम बनाना सबमिट नहीं होता है। मैं आपके समाधान की कोशिश करूंगा।

— करीम अली

एक चयन (ड्रॉप-डाउन) को अक्षम करने के साथ एक समस्या यह है कि कुछ ब्राउज़रों (जैसे IE9) में फ़ोकस खो जाता है। यह एक समस्या हो सकती है यदि एक अजाक्स कॉल संसाधित होने के दौरान चुनिंदा तत्व अक्षम किया जा रहा है, उदाहरण के लिए, क्योंकि प्रपत्र में उपयोगकर्ता की स्थिति खो गई है।

— क्रिस

तुम्हारे सुझाव के लिए धन्यवाद। हालांकि एक सवाल; मैं एक छिपे हुए क्षेत्र में ड्रॉप डाउन मूल्य कैसे संग्रहीत करूंगा? क्या आपके पास उसके लिए कुछ उदाहरण कोड होंगे?

— kramer65

एक और "वर्कअराउंड" फॉर्म सबमिट करने से पहले उन क्षेत्रों को सक्षम करने के लिए होगा। या मेरे मामले में जहां मैंने JSON प्रारूप में डेटा भेजा था (सक्षम करें, डेटा प्राप्त करें, फिर से अक्षम करें): var अक्षम = $ (yourform) .find (': इनपुट: अक्षम')। removeAttr ('अक्षम'); var डेटा = getFormJSONData ($ (तुम्हारा)); विकलांग .attr ('अक्षम', 'अक्षम');

— केडीटी

आपको prop()अभी उपयोग करना चाहिए ।

— एलेक्स

Answer 2

मेरे पास एक ही समस्या थी, मेरा समाधान चयनित नहीं सभी विकल्पों को अक्षम करना था। JQuery के साथ बहुत आसान:

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

संपादित करें => यदि आपके पास एक ही पृष्ठ पर कई ड्रॉपडाउन हैं, तो नीचे दिए गए चयन-आईडी पर सभी चयनित विकल्पों को अक्षम न करें।

$('#select_field_id option:not(:selected)').attr('disabled', true);

Comments

महान विचार! JQuery के वर्तमान संस्करणों के साथ सर्वोत्तम प्रथाओं का उपयोग करने के लिए, मैं अक्षम मान को सेट करने के लिए प्रोप विधि का उपयोग करूंगा। यानी$('option:not(:selected)').prop('disabled', true);

— क्रिस ओ'कॉनेल

यह एक बहुत ही मजाकिया समाधान है!

— जैक्स

हाँ! महान विचार।

— एरिक

यह n ° 1 उत्तर होना चाहिए।

— एरवान क्लुगैरत्ज़

Answer 3

चयनित मान को अक्षम किए बिना इसे आज़माएं ..

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

इससे मेरा काम बनता है..

Comments

आपके उत्तर के रूप में एक ही पंक्ति के साथ मैंने अन्य विकल्प $ ('# cf_1268591 विकल्प: नहीं (:))') को हटा दिया है।

— सेठ सर्दियां

Answer 4

यह वही है जो आप देख रहे हैं:

$('#cf_1268591').attr("style", "pointer-events: none;");

एक जादू की तरह काम करता है।

Comments

महान जवाब लेकिन यह अभी भी चयन करने के लिए tabbed करने की अनुमति देता है सावधान रहना। आपको tabindex="-1"

— uesports135

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

— sina_Islam

Answer 5

किसी तत्व को सेट disabledकरने से डेटा सबमिट नहीं होगा, हालांकि selectतत्वों की आवश्यकता नहीं है readonly।

टैब के साथ परिवर्तन को रोकने के लिए आप स्टाइल और JS के लिए CSS का उपयोग करने readonlyपर अनुकरण कर सकते हैं select:

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

फिर इसका उपयोग करें जैसे:

var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});

परिणाम:

  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click here to enable readonly</a>
<select>
<option>Example 1</option>
<option selected>Example 2</option>
<option>Example 3</option>
</select>

Comments

बहुत अच्छा दृष्टिकोण, लेकिन उपयोगकर्ता अभी भी मूल्य का चयन करने के लिए कीबोर्ड पर TAB का उपयोग कर सकता है।

— रिकार्डो मार्टिन्स

@RicardoMartins धन्यवाद, TAB के साथ बदलाव को रोकने के लिए जवाब अपडेट किया

— लुकास Bustamante

Answer 6

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

//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     

Answer 7

चयनित विकल्पों को न हटाने के लिए सरल jquery।

$('#your_dropdown_id option:not(:selected)').remove();

Comments

साथ ही मेरा समाधान भी। उन्हें विकलांग बनाने से बेहतर है।

— गियानलुका डेमारिनिस

Answer 8

यहां चीजों को सरल बनाने के लिए एक jQuery प्लगइन है जो परेशानी के बिना करता है: https://github.com/haggen/readonly

Comments

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

— एलेक्स हॉपकिंस

Answer 9

यह पंक्ति readonlyकेवल पढ़ने के लिए विशेषता के साथ चयन करती है :

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

Answer 10

यह कोड पहले प्रत्येक ड्रॉपडाउन पर मूल चयन को संग्रहीत करेगा। फिर अगर उपयोगकर्ता चयन को बदल देता है तो यह ड्रॉपडाउन को उसके मूल चयन में बदल देगा।

http://jsfiddle.net/4aHcD/22/

//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});

Answer 11

मेरे लिए सबसे आसान विकल्प था कि मैं आसानी से चयन करूं और जोड़ दूं:

onmousedown="return false" onkeydown="return false"

आपको कोई अतिरिक्त तर्क लिखने की आवश्यकता नहीं है। कोई छिपा इनपुट या अक्षम और फिर फॉर्म सबमिट पर फिर से सक्षम।

Answer 12

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

यह काम नहीं करता है:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

इस काम:

<script language="JavaScript">
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>

हाँ, मुझे पता है कि मुझे बेहतर प्रोप का उपयोग करना चाहिए, और एट्री का नहीं, लेकिन कम से कम अब प्रो प्रोप काम नहीं करेगा क्योंकि पुराने संस्करण के jquery, और अब मैं इसे अपडेट नहीं कर सकता, न ही पूछें कि क्यों ... html अंतर केवल आईडी जोड़ा गया है:। ..

<select name="img_size" class="dropDown" id="img_size">
<option value="200">200px
</option><option value="300">300px
</option><option value="400">400px
</option><option value="500">500px
</option><option value="600" selected="">600px
</option><option value="800">800px
</option><option value="900">900px
</option><option value="1024">1024px
</option></select>

<input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" />

...

मुझे स्क्रिप्ट में कोई गलती नहीं मिली है, और नाम के साथ संस्करण में, कंसोल में कोई त्रुटि नहीं थी। लेकिन यह कोड में मेरी गलती हो सकती है

पर देखा: विन 7 प्रो पर क्रोम 26

खराब व्याकरण के लिए क्षमा करें।

Answer 13

मैंने पाया है, ऐसा करने का एक बेहतर तरीका है कि पॉइंटर का उपयोग पॉइंटर-ईवेंट को हटाने और ड्रॉप डाउन पर अपारदर्शिता को संशोधित करने के लिए (0.5 का प्रयास करें)। यह उपयोगकर्ता को यह रूप देता है कि वह सामान्य रूप से अक्षम है, लेकिन फिर भी डेटा पोस्ट करता है।

दी यह है कि पीछे की संगतता के साथ कुछ मुद्दे हैं, लेकिन मेरी राय में यह एक बेहतर विकल्प है कि कष्टप्रद विकलांग / आसानी से जारी होने वाले मुद्दे के आसपास हो।

Comments

क्या आप ऐसा करने के लिए आवश्यक CSS पर विस्तार से बता सकते हैं?

— कोकवल्ला

Answer 14

आप इसे अक्षम भी कर सकते हैं और इस समय आप सबमिट कॉल सक्षम कर सकते हैं। मुझे लगता है कि सबसे आसान तरीका है :)

Answer 15

यह बहुत अच्छी तरह से काम करता है

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

इससे मैं विकल्प देख सकता हूं लेकिन मैं इसका चयन नहीं कर सकता

Answer 16

पढ़ी-लिखी बूंद-बूंद जैसी कोई चीज नहीं होती। आप जो कर सकते थे, उसे प्रत्येक परिवर्तन के बाद मैन्युअल रूप से पहले मूल्य पर रीसेट करें।

$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});

http://jsfiddle.net/4aHcD/

Comments

अच्छा नहीं है यदि वर्तमान में चयनित विकल्प इस उदाहरण में पहले सूची में नहीं है: jsfiddle.net/4aHcD/19

— होमर

@ हॉमर, कोड को किसी भी परिवर्तन के बाद इसे रीसेट करने का इरादा है, और यह उस प्रभाव में काम करता है। यदि आप चाहते हैं कि यह किसी कारण के लिए प्रारंभिक मूल्य को बदलने के बजाय शुरू में चल रहा है, तो आप इस $("select").change()तरह से jsfiddle.net/4aHcD/20

— एलेक्स Turpin

जब पृष्ठ पहले लोड होता है, यदि तीसरा आइटम चुना जाता है और उपयोगकर्ता इसे दूसरे आइटम में बदलने की कोशिश करता है, तो आपका कोड चयन को पहले आइटम में बदल देता है। मुझे नहीं लगता कि ऐसा नहीं करना चाहिए। यहाँ एक उदाहरण है जो मुझे लगता है कि ओपी चाहता था, एक ड्रॉपडाउन जो उपयोगकर्ता की बातचीत के आधार पर अपने चयनित मूल्य को नहीं बदलेगा: jsfiddle.net/4aHcD/22

— होमर

मुझे क्या चाहिए और ओपी क्या अनुरोध कर रहे थे , यह केवल पढ़ने के लिए एक तरीका था । इसका मतलब है कि आप चयनित मान या मान देख सकते हैं लेकिन इसे बदल नहीं सकते। इसका मतलब है कि प्रदर्शन संपादन योग्य नियंत्रण की उपस्थिति की नकल करता है, इसे संपादित करने में सक्षम होने के बिना।

— सनकैट २२

Answer 17

"कीप अप" होने पर खाली स्ट्रिंग बनाने की कोशिश करें

Html है:

<input id="cf_1268591" style="width:60px;line-height:16px;border:1px solid #ccc">

जक्वरी है:

$("#cf_1268591").combobox({
  url:"your url",
  valueField:"id",
  textField:"text",
  panelWidth: "350",
  panelHeight: "200",
});

// रिक्त स्ट्रिंग के साथ कीप के बाद

var tb = $("#cf_1268591").combobox("textbox");
  tb.bind("keyup",function(e){
  this.value = "";
});

Answer 18

शायद आप इस तरह से कोशिश कर सकते हैं

function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}

यह ड्रॉप-डाउन का पहला मान डिफ़ॉल्ट के रूप में सेट करता है और यह आसानी से लगता है

Answer 19

html5 का समर्थन:

`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');

`

Answer 20

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

select[disabled=readonly] {
    .... styles you like for read-only
}

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

Answer 21

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

और जानकारी

jQuery(document).ready(function($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('<input/>', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});

/*Optional*/

select.disabled {
  color: graytext;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" name="my-form">
  <select id="my-select" name="alpha">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</form>
<br/>
<button id="toggle">toggle enable/disable</button>