关于javascript：HTML表单只读SELECT标签/输入


HTML form readonly SELECT tag/input

根据HTML规范，HTML中的select标记没有readonly属性，只有disabled属性。 因此，如果您希望阻止用户更改下拉列表，则必须使用disabled。

唯一的问题是禁用的HTML表单输入不会包含在POST / GET数据中。

模拟select标记的readonly属性并获取POST数据的最佳方法是什么？

相关讨论

您应该保留select元素disabled，但也要添加另一个具有相同名称和值的隐藏input。

如果重新启用SELECT，则应将其值复制到onchange事件中的隐藏输入，并禁用(或删除)隐藏的输入。

这是一个演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('#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;
});
1
2
3
#formdata_container {
    padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

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



    Submitted data:

相关讨论

我们也可以用它

禁用除所选选项以外的所有选项

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

这样下拉列表仍然有效(并提交其值)，但用户无法选择其他值。

演示

相关讨论

简单的jQuery解决方案

如果您的选择具有readonly类，请使用此选项

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

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

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

简单的CSS解决方案

1
2
3
4
5
6
7
8
select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

这导致Select为灰色，悬停时有很好的"禁用"光标
并且在选择时，选项列表为"空"，因此您无法更改其值。

相关讨论

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

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

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

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

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

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

更容易：
将style属性添加到select标记：

1
style="pointer-events: none;"
相关讨论

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

1
2
3
4
$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});
相关讨论

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

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

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

不需要JavaScript hacks。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 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
相关讨论

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

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

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

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

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

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

相关讨论

一种简单的服务器端方法是删除除了您要选择的选项之外的所有选项。因此，在Zend Framework 1.12中，如果$ element是Zend_Form_Element_Select：

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

如果禁用表单字段，则在提交表单时不会发送此字段。
因此，如果你需要一个像disabled一样的readonly但是发送值会这样做：

在元素的只读属性发生任何变化之后。

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

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

使用tabindex的解决方案。 适用于选择但也适用于文本输入。

只需使用.disabled类。

CSS：

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

JS：

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

HTML：

1
2
3
4
5
<select class="disabled">
    <option value="0">0</option>
</select>

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

编辑：使用Internet Explorer，您还需要这个JS：

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

我发现的很好，使用普通的javascript(即：不需要JQuery库)，是将

javascript：

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

去除：

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

编辑：添加删除方法

相关讨论

简单地说，在提交表单之前删除disabled属性。

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

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

disabled="disabled" ->将从数据库中获取您的值，并在表单中显示它。
readonly="readonly" ->您可以在selectbox中更改您的值，但您的值无法保存在数据库中。

相关讨论

这是尝试使用自定义jQuery函数来实现功能(如此处所述)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(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);

});

在IE中，我能够通过双击击败onfocus => onblur方法。
但记住该值然后在onchange事件中恢复它似乎处理该问题。

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

您可以使用javascript变量在没有expando属性的情况下执行类似操作。

我通过隐藏选择框并在其位置仅显示信息值显示span来管理它。如果禁用.readonly类，我们还需要删除.toVanish元素并显示.toShow元素。

1
2
3
4
5
6
7
8
9
 $( '.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()
            }
    });

我知道这对每个人都没有帮助(如果你只是客户端)，但会帮助一些完全堆叠并控制后端和前端的人。

如果用户没有特权来编辑字段，我只返回下拉列表的当前选择。

这是我的一些后端控制器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        #region Prepare Action Priviledges
        editAuditVM.ExtAuditEditRoleMatrixVM = new ExtAuditEditRoleMatrixVM
        {
            CanEditAcn = _extAuditEditRoleMatrixHelper.CanEditAcn(user, audit),
            CanEditSensitiveDesignation = _extAuditEditRoleMatrixHelper.CanEditSensitiveDesignation(user, audit),
            CanEditTitle = _extAuditEditRoleMatrixHelper.CanEditTitle(),
            CanEditAuditScope = _extAuditEditRoleMatrixHelper.CanEditAuditScope(user, audit)
        };
        #endregion


        #region Prepare SelectLists for Drop Downs
        #region AuditScope List
        IQueryable<SelectListItem> auditScopes = _auditTypesRepo.AuditTypes
            .Where(at => at.AuditTypeClassCode.ToLower() =="e")
            .Select(at => new SelectListItem
            { Text = at.AuditTypeText, Value = at.AuditTypeID.ToString() });
        // Cannot make a select readonly on client side.
        //  So only return currently selected option.
        if (!editAuditVM.ExtAuditEditRoleMatrixVM.CanEditAuditScope)
        {
            auditScopes = auditScopes
                .Where(ascopeId => ascopeId.Value == editAuditVM.ExternalAudit.AuditTypeID.ToString());
        }
        #endregion
        #endregion

以下为我工作：

1
$('select[name=country]').attr("disabled","disabled");
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
    var selectedOpt;//initialize var
    var newIdForHidden;//initialize var
    $('.disabledOnEdit').focusin(function(){
        selectedOpt = $(this).find(":selected").val();
        newIdForHidden = $(this).attr('id')+'Hidden';
        //alert(selectedOpt+','+newIdForHidden);
        $(this).append('');
        $(this).find('input.hiddenSelectedOpt').attr('id',newIdForHidden).val(selectedOpt);
    });
    $('.disabledOnEdit').focusout(function(){
        var oldSelectedValue=$(this).find('input.hiddenSelectedOpt').val();
        $(this).val(oldSelectedValue);
    });

select multiple对上面的代码建议几乎没有响应。随着大锤和大刀，我最终得到了这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var thisId="";
var thisVal="";
function selectAll(){
    $("#"+thisId+" option").each(function(){
        if(!$(this).prop("disabled"))$(this).prop("selected",true);
    });
    $("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
    $("select option:not(:selected)").attr('disabled',true);
    $("select[multiple]").focus(function(){
        thisId=$(this).prop("id");
        thisVal=$(this).val();
        $(this).prop("disabled",true).blur();
        setTimeout("selectAll();",200);
    });
});

如果选择下拉列表从出生开始是只读的，根本不需要更改，也许您应该使用另一个控件？就像一个简单的(加上隐藏的表单字段)或？

补充：如果下拉列表不是一直只读，并且JavaScript用于启用/禁用它，那么这仍然是一个解决方案 - 只需动态修改DOM即可。

相关讨论

非常简单。第一个存储值在变量中。然后将更改事件设置值更改为保存初始值的存储变量

我的名字是映射。然后我的代码如下;

1
2
3
4
5
6
$("document").ready(function(){
    var mapping=$("select[name=mapping]").val();
    $("select[name=mapping]").change(function(){
        $("select[name=mapping]").val(mapping);
    });
});

如果您有一个只读的select标签，则必须在逻辑上将选择框转换为单个"text"字段。

我逻辑地说，因为它是这样的：
"我必须向用户显示一个值"

无论值是否来自select标记，仍然是单个值且无法更改(readonly)。

因此，从逻辑上讲，只有在第一次插入值时才使用select标记。

然后，当您需要显示此值时，您必须将其放在"text field-readonly"上。

对于多重选择也是如此，如果只读，则成为值列表(所选值)

我使用"text"，因为readonly-tag不需要"type"属性。
干杯

在一个选项中，您可以使用disabled="disabled"，而不是选择本身

相关讨论

有同样的问题，发现形式非常有用的属性 - submitdisabledcontrols。

将其设置为True并禁用输入现在为POST。

相关讨论