Thẻ HTML chỉ đọc / nhập

Theo thông số kỹ thuật HTML, selectthẻ trong HTML không có readonlythuộc tính, chỉ có disabledthuộc tính. Vì vậy, nếu bạn muốn ngăn người dùng thay đổi danh sách thả xuống, bạn phải sử dụng disabled.

Vấn đề duy nhất là các đầu vào dạng HTML bị vô hiệu hóa không được đưa vào dữ liệu POST / GET.

Cách tốt nhất để mô phỏng readonlythuộc tính cho selectthẻ và vẫn nhận được dữ liệu POST?

Bạn nên giữ selectnguyên phần tử disablednhưng cũng thêm một phần tử ẩn khác inputcó cùng tên và giá trị.

Nếu bạn có thể kích hoạt CHỌN của mình, bạn nên sao chép giá trị của nó vào đầu vào ẩn trong một sự kiện onchange và vô hiệu hóa (hoặc loại bỏ) đầu vào ẩn.

Đây là một bản demo:

$('#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>

Chúng ta cũng có thể sử dụng cái này

Vô hiệu hóa tất cả ngoại trừ tùy chọn đã chọn:

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

Bằng cách này, trình đơn thả xuống vẫn hoạt động (và gửi giá trị của nó) nhưng người dùng không thể chọn giá trị khác.

Bản giới thiệu

Bạn có thể kích hoạt lại đối tượng được chọn khi gửi.

EDIT : tức là, thông thường vô hiệu hóa thẻ chọn (với thuộc tính bị vô hiệu hóa) và sau đó bật lại tự động ngay trước khi gửi biểu mẫu:

Ví dụ với jQuery:

• Để vô hiệu hóa nó:

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

• Để kích hoạt lại trước khi gửi để bao gồm dữ liệu GET / POST:

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

Ngoài ra, bạn có thể bật lại mọi đầu vào bị vô hiệu hóa hoặc chọn:

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

một cách khác để làm một readOnlythuộc tính cho một selectphần tử là bằng cách sử dụngcss

bạn có thể làm như thế nào:

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

BẢN GIỚI THIỆU

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

Đã thử nghiệm và hoạt động trong IE 6, 7 & 8b2, Firefox 2 & 3, Opera 9.62, Safari 3.2.1 cho Windows và Google Chrome.

Giải pháp jQuery đơn giản

Sử dụng điều này nếu lựa chọn của bạn có readonlylớp

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

Hoặc điều này nếu lựa chọn của bạn có readonly="readonly"thuộc tính

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

Giải pháp CSS đơn giản:

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

select[readonly] option{
    display:none;
}

Điều này dẫn đến Chọn màu xám với con trỏ "vô hiệu hóa" đẹp khi di chuột
và chọn danh sách tùy chọn là "trống" để bạn không thể thay đổi giá trị của nó.

Tuy nhiên, một tùy chọn hiện đại khác (không có ý định chơi chữ) là vô hiệu hóa tất cả các tùy chọn của phần tử chọn khác sau đó là phần tử được chọn.

tuy nhiên lưu ý rằng đây là một tính năng HTML 4.0 và tức là 6,7,8 beta 1 dường như không tôn trọng điều này.

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

Đây là giải pháp tốt nhất tôi đã tìm thấy:

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

Đoạn mã trên vô hiệu hóa tất cả các tùy chọn khác không được chọn trong khi vẫn bật tùy chọn đã chọn. Làm như vậy tùy chọn đã chọn sẽ đưa nó vào dữ liệu sau.

Tôi biết rằng đã quá muộn, nhưng nó có thể được thực hiện bằng CSS đơn giản:

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

Kiểu ẩn tất cả các tùy chọn và các nhóm khi lựa chọn ở readonlytrạng thái, vì vậy người dùng không thể thay đổi lựa chọn của mình.

hacks Không Javascript là cần thiết.

Dễ dàng hơn vẫn: thêm thuộc tính phong cách cho bạn chọn thẻ:

style="pointer-events: none;"

Đây là giải pháp đơn giản và tốt nhất. Bạn sẽ đặt một attrny attr trên lựa chọn của bạn, hoặc bất kỳ attr nào như dữ liệu chỉ đọc và làm như sau

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

Đặt lựa chọn bị vô hiệu hóa khi bạn lập kế hoạch cho nó ở chế độ chỉ đọc và sau đó xóa thuộc tính bị vô hiệu hóa ngay trước khi gửi biểu mẫu.

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

Ngoài việc vô hiệu hóa các tùy chọn không nên chọn, tôi thực sự muốn làm cho chúng biến mất khỏi danh sách, nhưng vẫn có thể kích hoạt chúng nếu tôi cần sau này:

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

Điều này tìm thấy tất cả các thành phần được chọn với thuộc tính chỉ đọc, sau đó tìm tất cả các tùy chọn bên trong các lựa chọn không được chọn, sau đó nó ẩn chúng và vô hiệu hóa chúng.

Điều quan trọng là phải phân tách truy vấn jquery trong 2 vì lý do hiệu suất, bởi vì jquery đọc chúng từ phải sang trái, mã:

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

đầu tiên sẽ tìm thấy tất cả các tùy chọn không được chọn trong tài liệu và sau đó lọc các tùy chọn bên trong các lựa chọn với thuộc tính chỉ đọc.

Một cách tiếp cận phía máy chủ đơn giản là loại bỏ tất cả các tùy chọn ngoại trừ tùy chọn mà bạn muốn được chọn. Như vậy, trong Zend Framework 1.12, nếu $ phần tử là một Zend_Form_Element_Select:

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

Nếu bạn tắt trường biểu mẫu, trường này sẽ không được gửi khi biểu mẫu được gửi. Vì vậy, nếu bạn cần một readonlyhoạt động như thế disablednhưng gửi giá trị làm điều này:

Sau khi có bất kỳ thay đổi nào về thuộc tính chỉ đọc của một phần tử.

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

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

Giải pháp với tabindex. Hoạt động với đầu vào chọn nhưng cũng có văn bản.

Đơn giản chỉ cần sử dụng một lớp .disables.

CSS:

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

JS:

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

HTML:

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

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

Chỉnh sửa: Với Internet Explorer, bạn cũng cần mã này:

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

Theo gợi ý từ Grant Wagners; đây là một đoạn mã jQuery thực hiện nó với các hàm xử lý thay vì các thuộc tính onXXX trực tiếp:

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

};

Tôi đã giải quyết nó bằng jquery:

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

Nếu bạn đang sử dụng xác thực jquery, bạn có thể thực hiện như sau, tôi đã sử dụng thuộc tính bị vô hiệu hóa mà không gặp vấn đề gì:

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

Những gì tôi tìm thấy hoạt động rất tốt, với javascript đơn giản (nghĩa là: không yêu cầu thư viện JQuery), là thay đổi bên trongHTML của <select>thẻ thành giá trị còn lại duy nhất mong muốn.

Trước:

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

Javascript mẫu:

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

Sau:

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

Bằng cách này, không có thay đổi hiệu ứng trực quan và điều này sẽ POST / GET trong <FORM>.

Thay vì chọn chính nó, bạn có thể vô hiệu hóa tất cả các tùy chọn ngoại trừ tùy chọn hiện được chọn. Điều này mang lại sự xuất hiện của một trình đơn thả xuống hoạt động, nhưng chỉ có tùy chọn bạn muốn thông qua là một lựa chọn hợp lệ.

giải pháp html:

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

những người viết javascript:

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

để xóa:

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

chỉnh sửa: thêm phương thức loại bỏ

Đơn giản, xóa thuộc tính bị vô hiệu hóa trước khi gửi biểu mẫu.

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

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

disabled="disabled" ->sẽ nhận được giá trị của bạn từ cơ sở dữ liệu dan hiển thị nó trong mẫu. readonly="readonly" ->bạn có thể thay đổi giá trị của mình trong selectbox, nhưng giá trị của bạn không thể lưu trong cơ sở dữ liệu của bạn.

Nếu danh sách thả xuống được chọn chỉ đọc từ khi sinh ra và hoàn toàn không cần thay đổi, có lẽ bạn nên sử dụng một điều khiển khác thay thế? Giống như một trường đơn giản <div>(cộng với trường mẫu ẩn) hoặc an <input type="text">?

Đã thêm: Nếu danh sách thả xuống không chỉ đọc mọi lúc và JavaScript được sử dụng để bật / tắt nó, thì đây vẫn là một giải pháp - chỉ cần sửa đổi DOM khi đang di chuyển.

Dưới đây làm việc cho tôi:

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

Tôi đã quản lý nó bằng cách ẩn hộp chọn và hiển thị spanvị trí của nó chỉ với giá trị thông tin. Trong trường hợp vô hiệu hóa .readonlylớp, chúng ta cũng cần loại bỏ các .toVanishphần tử và hiển thị các phần tử .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()
            }
    });

Trong IE tôi đã có thể đánh bại cách tiếp cận onf Focus => onblur bằng cách nhấp đúp. Nhưng ghi nhớ giá trị và sau đó khôi phục nó trong sự kiện onchange dường như xử lý vấn đề đó.

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

Bạn có thể làm tương tự mà không cần thuộc tính mở rộng bằng cách sử dụng biến javascript.

Đây là một nỗ lực để sử dụng một chức năng jQuery tùy chỉnh để đạt được chức năng (như được đề cập ở đây):

$(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);

});