Ich verwende die folgende Anweisung, um sie schreibgeschützt zu machen, aber sie funktioniert nicht.

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

Ich möchte es nicht deaktivieren, ich möchte es schreibgeschützt machen.

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

Dropdown ist immer schreibgeschützt. Sie können es deaktivieren

Wenn Sie mit einem Formular arbeiten, werden die deaktivierten Felder nicht gesendet. Verwenden Sie daher ein verstecktes Feld, um den deaktivierten Dropdown-Wert zu speichern

Ich hatte das gleiche Problem. Meine Lösung bestand darin, alle nicht ausgewählten Optionen zu deaktivieren. Sehr einfach mit jQuery:

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

Bearbeiten => Wenn Sie mehrere Dropdowns auf derselben Seite haben, deaktivieren Sie alle nicht ausgewählten Optionen in der Auswahl-ID wie folgt.

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

Versuchen Sie dies .. ohne den ausgewählten Wert zu deaktivieren ..

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

Für mich geht das..

Das suchen Sie:

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

Klappt wunderbar.

Wenn Sie ein Element mit disabledfestlegen, werden die Daten nicht gesendet, selectElemente jedoch nicht readonly.

Sie können eine Simulation readonlyauf der selectVerwendung von CSS für das Styling und JS Wechsel mit Tab zu verhindern:

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

Dann benutze es wie folgt:

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'));
});

Ergebnis:

  // 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>

Ich würde das Feld deaktivieren. Wenn das Formular gesendet wird, deaktivieren Sie es nicht. Meiner Meinung nach ist dies einfacher, als mit versteckten Feldern umgehen zu müssen.

//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 );
});     

Einfache Abfrage zum Entfernen nicht ausgewählter Optionen.

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

Zur Vereinfachung gibt es hier ein jQuery-Plugin, das dies ohne Probleme erledigt: https://github.com/haggen/readonly

Diese Zeile wählt mit dem readonlyAttribut schreibgeschützt aus:

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

Dieser Code speichert zuerst die ursprüngliche Auswahl in jeder Dropdown-Liste. Wenn der Benutzer die Auswahl ändert, wird die Dropdown-Liste auf die ursprüngliche Auswahl zurückgesetzt.

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);
});

Die einfachste Option für mich war, die Auswahl als schreibgeschützt zu treffen und Folgendes hinzuzufügen:

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

Sie müssen keine zusätzliche Logik schreiben. Keine versteckten Eingaben oder deaktiviert und dann beim Senden des Formulars wieder aktiviert.

Es ist ein alter Artikel, aber ich möchte Leute warnen, die ihn finden werden. Seien Sie vorsichtig mit deaktivierten Attributen mit got Element nach Namen. Seltsam, aber es scheint nicht zu funktionieren.

das funktioniert nicht:

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

diese Arbeit:

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

Ja, ich weiß, dass ich besser prop und nicht attr verwenden sollte, aber zumindest funktioniert prop jetzt aufgrund der alten Version von jquery nicht, und jetzt kann ich es nicht aktualisieren. Fragen Sie nicht, warum ... HTML-Unterschied wird nur hinzugefügt id :. ..

<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()" />

...

Ich habe keine Fehler im Skript gefunden, und in der Version mit Namen gab es keine Fehler in der Konsole. Aber natürlich kann es mein Fehler im Code sein

Gesehen auf: Chrome 26 unter Win 7 Pro

Entschuldigung für die schlechte Grammatik.

Ich habe festgestellt, dass ein besserer Weg, dies zu tun, darin besteht, Zeigerereignisse mithilfe von CSS zu entfernen und die Deckkraft in der Dropdown-Liste zu ändern (versuchen Sie es mit 0,5). Dies gibt dem Benutzer den Eindruck, dass es wie gewohnt deaktiviert ist, aber dennoch Daten veröffentlicht.

Zugegeben, dies hat einige Probleme mit der Abwärtskompatibilität, ist aber meiner Meinung nach eine bessere Option, als das lästige Problem mit deaktivierten / schreibgeschützten Objekten zu umgehen.

Sie können es auch deaktivieren und in dem Moment, in dem Sie den Übermittlungsaufruf ausführen, aktivieren. Ich denke ist der einfachste Weg :)

Es funktioniert sehr gut

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

Damit kann ich die Optionen sehen, aber ich kann sie nicht auswählen

Es gibt kein schreibgeschütztes Dropdown-Menü. Sie können es nach jeder Änderung manuell auf den ersten Wert zurücksetzen.

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

http://jsfiddle.net/4aHcD/

Versuchen Sie, eine leere Zeichenfolge zu erstellen, wenn Sie die Taste drücken.

Das HTML ist:

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

Die Frage ist:

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

// mache nach keyup mit leerer string

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

Vielleicht können Sie es so versuchen

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

Dies setzt den ersten Wert des Dropdowns als Standard und scheint schreibgeschützt zu sein

HTML5-Unterstützung:

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

`

Hier ist eine geringfügige Abweichung von den anderen Antworten, die die Verwendung von deaktiviert vorschlagen. Da das Attribut "disabled" tatsächlich einen beliebigen Wert haben und dennoch deaktiviert werden kann, können Sie es auf "readonly" setzen, wie "disabled =" readonly ". Dadurch wird das Steuerelement wie gewohnt deaktiviert und Sie können es mit CSS wie folgt einfach anders formatieren als mit normalen deaktivierten Steuerelementen:

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

Wenn Sie möchten, dass Daten gesendet werden, verwenden Sie ausgeblendete Felder oder aktivieren Sie sie vor dem Senden, wie in den anderen Antworten beschrieben.

Wie @Kanishka sagte, wenn wir ein Formularelement deaktivieren, wird es nicht gesendet. Ich habe ein Snippet für dieses Problem erstellt. Wenn das Auswahlelement deaktiviert ist, wird ein ausgeblendetes Eingabefeld erstellt und der Wert gespeichert. Wenn es aktiviert ist, werden die erstellten ausgeblendeten Eingabefelder gelöscht.

Mehr Info

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>