Tôi đang sử dụng câu lệnh sau để làm cho nó chỉ đọc nhưng nó không hoạt động.

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

Tôi không muốn vô hiệu hóa nó, tôi muốn làm cho nó chỉ đọc.

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

thả xuống luôn chỉ được đọc. những gì bạn có thể làm là làm cho nó bị vô hiệu hóa

nếu bạn làm việc với biểu mẫu, các trường bị vô hiệu hóa không gửi, vì vậy hãy sử dụng trường ẩn để lưu trữ giá trị thả xuống bị vô hiệu hóa

Tôi đã gặp vấn đề tương tự, giải pháp của tôi là vô hiệu hóa tất cả các tùy chọn không được chọn. Rất dễ dàng với jQuery:

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

Chỉnh sửa => Nếu bạn có nhiều trình đơn thả xuống trên cùng một trang, hãy tắt tất cả các tùy chọn không được chọn trên select-ID như bên dưới.

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

Hãy thử cái này .. mà không tắt giá trị đã chọn ..

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

Nó phù hợp với tôi ..

Đây là những gì bạn đang tìm kiếm:

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

Hoạt động như một sự quyến rũ.

Đặt một phần tử với disabledsẽ không gửi dữ liệu, tuy nhiên, selectcác phần tử không córeadonly .

Bạn có thể mô phỏng một readonlytrên selectsử dụng CSS để tạo kiểu tóc và JS để ngăn chặn sự thay đổi với tab:

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

Sau đó sử dụng nó như:

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

Kết quả:

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

Tôi sẽ làm cho trường bị vô hiệu hóa. Sau đó, khi biểu mẫu được gửi đi, hãy làm cho nó không bị vô hiệu hóa. Theo tôi, điều này dễ dàng hơn so với việc phải xử lý các trường ẩn.

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

Jquery đơn giản để loại bỏ các tùy chọn không được chọn.

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

Để đơn giản hóa mọi thứ, đây là một plugin jQuery thực hiện điều đó mà không gặp rắc rối: https://github.com/haggen/readonly

Dòng này thực hiện các lựa chọn với readonlythuộc tính chỉ đọc:

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

Mã này trước tiên sẽ lưu trữ lựa chọn ban đầu trên mỗi menu thả xuống. Sau đó, nếu người dùng thay đổi lựa chọn, nó sẽ đặt lại danh sách thả xuống về lựa chọn ban đầu.

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

Tùy chọn dễ nhất đối với tôi là chọn chỉ đọc và thêm:

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

Bạn không cần phải viết thêm bất kỳ logic nào. Không có đầu vào ẩn hoặc bị vô hiệu hóa và sau đó được bật lại khi gửi biểu mẫu.

Đó là một bài báo cũ, nhưng tôi muốn cảnh báo những người sẽ tìm thấy nó. Hãy cẩn thận với thuộc tính bị vô hiệu hóa có phần tử theo tên. Lạ nhưng nó có vẻ không quá hiệu quả.

điều này không hoạt động:

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

công việc này:

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

Vâng, tôi biết rằng tôi nên sử dụng prop chứ không phải attr, nhưng ít nhất bây giờ prop sẽ không hoạt động vì phiên bản cũ của jquery, và bây giờ tôi không thể cập nhật nó, đừng hỏi tại sao ... sự khác biệt html chỉ được thêm 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()" />

...

Tôi không tìm thấy bất kỳ lỗi nào trong tập lệnh và trong phiên bản có tên, không có lỗi nào trong bảng điều khiển. Nhưng tất nhiên nó có thể là sai lầm của tôi trong mã

Đã xem trên: Chrome 26 trên Win 7 Pro

Xin lỗi vì ngữ pháp tồi.

Tôi đã tìm thấy, cách tốt hơn để làm điều này là sử dụng CSS để loại bỏ sự kiện con trỏ và sửa đổi độ mờ trên menu thả xuống (thử 0,5). Điều này cho người dùng thấy rằng nó bị vô hiệu hóa như bình thường, nhưng vẫn đăng dữ liệu.

Được cho là điều này có một số vấn đề với khả năng tương thích ngược, nhưng theo tôi là một lựa chọn tốt hơn là giải quyết vấn đề bị vô hiệu hóa / chỉ đọc khó chịu.

Bạn cũng có thể vô hiệu hóa nó và tại thời điểm bạn thực hiện cuộc gọi gửi, hãy bật nó. Tôi nghĩ là cách dễ nhất :)

Nó hoạt động rất tốt

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

Với cái này, tôi có thể thấy các tùy chọn nhưng tôi không thể chọn nó

Không có cái gọi là trình đơn thả xuống chỉ đọc. Những gì bạn có thể làm là đặt lại giá trị đầu tiên theo cách thủ công sau mỗi lần thay đổi.

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

http://jsfiddle.net/4aHcD/

Cố gắng tạo chuỗi trống khi "nhấn phím lên"

Html là:

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

Jquery là:

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

// tạo sau keyup với chuỗi trống

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

Có lẽ bạn có thể thử cách này

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

Điều này đặt giá trị đầu tiên của menu thả xuống làm giá trị mặc định và có vẻ như nó chỉ đọc

html5 hỗ trợ:

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

`

Đây là một biến thể nhỏ đối với các câu trả lời khác đề xuất sử dụng tắt. Vì thuộc tính "đã tắt" thực sự có thể có bất kỳ giá trị nào và vẫn bị vô hiệu hóa, bạn có thể đặt nó thành chỉ đọc, như vô hiệu hóa = "readonly". Điều này sẽ vô hiệu hóa điều khiển như bình thường và cũng sẽ cho phép bạn dễ dàng tạo kiểu cho nó khác với các điều khiển bị tắt thông thường, với CSS như:

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

Nếu bạn muốn dữ liệu được bao gồm, hãy gửi, hãy sử dụng các trường ẩn hoặc bật trước khi gửi, như được nêu chi tiết trong các câu trả lời khác.

Như @Kanishka đã nói, nếu chúng tôi vô hiệu hóa một phần tử biểu mẫu, nó sẽ không được gửi. Tôi đã tạo một đoạn mã cho vấn đề này. Khi phần tử chọn bị tắt, nó sẽ tạo ra một trường nhập ẩn và lưu trữ giá trị. Khi nó được kích hoạt, nó sẽ xóa các trường nhập ẩn đã tạo.

Thêm thông tin

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>