ฉันใช้คำสั่งต่อไปนี้เพื่อทำให้อ่านได้อย่างเดียว แต่ใช้งานไม่ได้

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

ฉันไม่ต้องการให้ปิดใช้งานฉันต้องการให้อ่านอย่างเดียว

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

แบบเลื่อนลงจะอ่านอย่างเดียวเสมอ สิ่งที่คุณทำได้คือปิดใช้งาน

หากคุณทำงานกับแบบฟอร์มช่องที่ปิดใช้งานจะไม่ส่งดังนั้นให้ใช้ฟิลด์ที่ซ่อนอยู่เพื่อจัดเก็บค่าแบบเลื่อนลงที่ปิดใช้งาน

ฉันมีปัญหาเดียวกันวิธีแก้ปัญหาของฉันคือปิดการใช้งานตัวเลือกทั้งหมดที่ไม่ได้เลือกไว้ ง่ายมากด้วย jQuery:

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

แก้ไข => หากคุณมีรายการแบบเลื่อนลงหลายรายการในหน้าเดียวกันให้ปิดใช้งานตัวเลือกที่ไม่ได้เลือกทั้งหมดในรหัสที่เลือกตามด้านล่าง

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

นี่คือสิ่งที่คุณกำลังมองหา:

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

ใช้งานได้เหมือนมีเสน่ห์

ลองอันนี้.. โดยไม่ปิดค่าที่เลือก ..

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

มันใช้ได้กับฉัน ..

ฉันจะทำให้ฟิลด์นี้ถูกปิดใช้งาน จากนั้นเมื่อส่งแบบฟอร์มแล้วให้ทำให้ไม่ปิดใช้งาน ในความคิดของฉันมันง่ายกว่าการจัดการกับช่องที่ซ่อนอยู่

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

การตั้งค่าองค์ประกอบที่มีdisabledจะไม่ส่งข้อมูล แต่องค์ประกอบไม่ได้selectreadonly

คุณสามารถจำลองreadonlyในselectการใช้ CSS สำหรับจัดแต่งทรงผมและ JS เพื่อป้องกันไม่ให้มีการเปลี่ยนแปลงกับแท็บ:

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>

jquery ง่าย ๆ เพื่อลบตัวเลือกที่ไม่ได้เลือก

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

เพื่อลดความซับซ้อนของสิ่งต่างๆนี่คือปลั๊กอิน jQuery ที่ทำได้โดยไม่ต้องยุ่งยาก: https://github.com/haggen/readonly

บรรทัดนี้ทำให้เลือกด้วยreadonlyแอตทริบิวต์อ่านอย่างเดียว:

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

รหัสนี้จะจัดเก็บการเลือกดั้งเดิมในแต่ละรายการแบบเลื่อนลง จากนั้นหากผู้ใช้เปลี่ยนแปลงสิ่งที่เลือกระบบจะรีเซ็ตรายการแบบเลื่อนลงเป็นการเลือกเดิม

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

ตัวเลือกที่ง่ายที่สุดสำหรับฉันคือเลือกเป็นแบบอ่านอย่างเดียวและเพิ่ม:

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

คุณไม่จำเป็นต้องเขียนตรรกะเพิ่มเติมใด ๆ ไม่มีอินพุตที่ซ่อนอยู่หรือปิดใช้งานแล้วเปิดใช้งานอีกครั้งในการส่งแบบฟอร์ม

เป็นบทความเก่า แต่ฉันต้องการเตือนผู้ที่จะพบมัน ระวังด้วยแอตทริบิวต์ที่ปิดใช้งานด้วย got element ตามชื่อ แปลก แต่ดูเหมือนจะไม่เวิร์คเกินไป

สิ่งนี้ไม่ได้ผล:

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

ใช่ฉันรู้ว่าฉันควรใช้ prop ไม่ใช่ attr ดีกว่า แต่อย่างน้อยตอนนี้ prop จะไม่ทำงานเนื่องจาก jquery เวอร์ชันเก่าและตอนนี้ฉันไม่สามารถอัปเดตได้อย่าถามว่าทำไม ... ความแตกต่างของ html ถูกเพิ่มเฉพาะ 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()" />

...

ฉันไม่พบข้อผิดพลาดใด ๆ ในสคริปต์และในเวอร์ชันที่มีชื่อไม่มีข้อผิดพลาดในคอนโซล แต่แน่นอนมันอาจเป็นความผิดพลาดของฉันในรหัส

เห็นบน: Chrome 26 บน Win 7 Pro

ขออภัยสำหรับไวยากรณ์ที่ไม่ดี

ฉันพบวิธีที่ดีกว่าในการทำเช่นนี้คือใช้ CSS เพื่อลบตัวชี้เหตุการณ์และแก้ไขความทึบของรายการแบบเลื่อนลง (ลอง 0.5) สิ่งนี้ทำให้ผู้ใช้ดูเหมือนว่าปิดใช้งานตามปกติ แต่ยังคงโพสต์ข้อมูล

ได้รับสิ่งนี้มีปัญหาบางอย่างเกี่ยวกับความเข้ากันได้แบบย้อนกลับ แต่ในความคิดของฉันเป็นตัวเลือกที่ดีกว่าการแก้ไขปัญหาปิดใช้งาน / อ่านอย่างเดียวที่น่ารำคาญ

คุณยังสามารถปิดใช้งานได้และในขณะที่คุณทำการโทรเพื่อเปิดใช้งาน ฉันคิดว่าเป็นวิธีที่ง่ายที่สุด :)

มันทำงานได้ดีมาก

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

ด้วยเหตุนี้ฉันจึงเห็นตัวเลือก แต่ไม่สามารถเลือกได้

ไม่มีรายการดรอปดาวน์แบบอ่านอย่างเดียว สิ่งที่คุณทำได้คือรีเซ็ตเป็นค่าแรกด้วยตนเองหลังจากการเปลี่ยนแปลงแต่ละครั้ง

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

http://jsfiddle.net/4aHcD/

พยายามทำให้สตริงว่างเปล่าเมื่อ "กดแป้นขึ้น"

Html คือ:

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

Jquery คือ:

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

// ทำหลังจาก keyup ด้วยสตริงว่าง

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

บางทีคุณอาจลองวิธีนี้

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

ค่านี้จะตั้งค่าแรกของรายการแบบเลื่อนลงเป็นค่าเริ่มต้นและดูเหมือนว่าอ่านอย่างเดียว

html5 รองรับ:

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

`

นี่คือรูปแบบเล็กน้อยสำหรับคำตอบอื่น ๆ ที่แนะนำให้ใช้ปิดใช้งาน เนื่องจากแอตทริบิวต์ "disabled" สามารถมีค่าใดก็ได้และยังคงปิดใช้งานอยู่คุณสามารถตั้งค่าเป็นแบบอ่านอย่างเดียวเช่น disabled = "readonly" การดำเนินการนี้จะปิดใช้งานการควบคุมตามปกติและยังช่วยให้คุณสามารถจัดรูปแบบให้แตกต่างจากการควบคุมที่ปิดใช้งานทั่วไปได้อย่างง่ายดายด้วย CSS เช่น:

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

หากคุณต้องการให้รวมข้อมูลส่งให้ใช้ฟิลด์ที่ซ่อนอยู่หรือเปิดใช้งานก่อนส่งตามรายละเอียดในคำตอบอื่น ๆ

ดังที่ @Kanishka กล่าวไว้หากเราปิดใช้งานองค์ประกอบแบบฟอร์มจะไม่ถูกส่ง ฉันได้สร้างตัวอย่างข้อมูลสำหรับปัญหานี้แล้ว เมื่อปิดใช้งานองค์ประกอบที่เลือกจะสร้างฟิลด์อินพุตที่ซ่อนอยู่และเก็บค่าไว้ เมื่อเปิดใช้งานจะลบฟิลด์อินพุตที่ซ่อนไว้ที่สร้างขึ้น

ข้อมูลเพิ่มเติม

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>