HTML表单只读SELECT标签/输入

您可以在提交时重新启用选择对象.

编辑:即,通常禁用select标签(使用disabled属性),然后在提交表单之前自动重新启用它:

jQuery示例:

要禁用它:

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

要在提交之前重新启用它,以便包含GET/POST数据:

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

此外,您可以重新启用每个禁用的输入或选择:

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

另一种对元素执行readOnly属性的方法select是使用css

你可以这样做:

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

DEMO

简单的jQuery解决方案

如果你的选择有readonly类,请使用此选项

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

或者,如果您的选择具有该readonly="readonly"属性

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

简单的CSS解决方案

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

select[readonly] option{
    display:none;
}

这导致选择为灰色,悬停
时选中漂亮的"禁用"光标,选择选项列表为"空",因此您无法更改其值.

另一个更现代的选项(没有双关语)是禁用所选元素以外的所有选项.

但请注意,这是一个HTML 4.0功能,即6,7,8 beta 1似乎不尊重这一点.

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

这是我找到的最佳解决方案:

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

上面的代码会在启用所选选项的同时禁用未选中的所有其他选项.这样做所选的选项将使其成为回发后的数据.

更简单:将style属性添加到select标签:

我知道它已经太晚了,但可以用简单的CSS完成:

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

当选择处于readonly状态时,样式会隐藏所有选项和组,因此用户无法更改其选择.

不需要JavaScript hacks.

这是最简单,最好的解决方案.您将在select或任何其他attr上设置readolny attr,如数据只读,并执行以下操作

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

当您计划将其设置为只读时设置禁用选项,然后在提交表单之前删除已禁用的属性.

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

除了禁用不应该选择的选项之外,我想让它们从列表中消失,但是如果我需要以后仍然可以启用它们:

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

这将查找具有readonly属性的所有select元素,然后查找未选中的那些选择内的所有选项,然后隐藏它们并禁用它们.

出于性能原因,将jquery查询分成2是很重要的,因为jquery从右到左读取它们,代码如下:

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

将首先在文档中找到所有未选中的选项,然后使用readonly属性过滤那些在选择内部的选项.