HTML表单只读选择标记/输入

根据HTML规范，HTML中的select标签没有readonly属性，只有一个disabled属性。 所以，如果你想保持用户不改变下拉，你必须使用disabled 。

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

什么是最好的方式来模仿select标签的readonly属性，并仍然获得POST数据？

Answer 1

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

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

这里是一个演示：

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

Answer 2

我们也可以使用这个

禁用除选定选项之外的所有内容

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

这样的下拉菜单仍然有效（并提交其值），但用户不能选择另一个值。

演示

Answer 3

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

编辑 ：即，通常禁用选择标记（具有禁用的属性），然后在提交表单之前自动重新启用它：

jQuery示例：

• 禁用它：

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

• 在提交之前重新启用它，以便包含GET / POST数据：

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

另外，您可以重新启用每个禁用的输入或选择：

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

Answer 4

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

测试和工作在IE 6,7＆8b2，Firefox 2＆3，Opera 9.62，Safari 3.2.1 for Windows和Google Chrome。

Answer 5

简单的jQuery解决方案

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

Answer 6

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

你可以这样做：

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

DEMO

Answer 7

简单的CSS解决方案

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

这导致选择是灰色的，漂亮的“禁用”光标悬停
并在选择列表的选项是“空”，所以你不能改变它的价值。

Answer 8

另一个更现代的选择（不是双关语意思）是禁用所选元素之外的选择元素的所有选项。

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

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

Answer 9

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

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

上面的代码禁用了所有其他选项，而不是选中的，同时保持启用选定的选项。 这样做选定的选项将使其成为回发数据。

Answer 10

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

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

Answer 11

这是最简单和最好的解决方案。 你将在你的选择或任何其他attr（如readonly）上设置一个readolny属性，并执行以下操作

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

Answer 12

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

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

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

由于性能原因，将jquery查询分隔为2是很重要的，因为jquery从右到左读取代码：

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

将首先查找文档中所有未选定的选项，然后使用readonly属性过滤选中的选项。

Answer 13

如果您禁用表单域，则在提交表单时将不会发送。 所以如果你需要一个只能工作的readonly ，但是发送值是这样的：

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

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

Answer 14

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

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

Answer 15

更容易：添加样式属性到你的选择标签：

 style="pointer-events: none;" 

Answer 16

继格兰特·瓦格纳（Grant Wagners）的建议之后， 这里是一个jQuery片段，它使用处理函数而不是直接的onXXX属性：

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

Answer 17

我解决了与jQuery的：

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

Answer 18

如果您正在使用jQuery验证，您可以执行以下操作，我使用禁用的属性没有问题：

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

Answer 19

我知道这太晚了，但可以用简单的CSS来完成：

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

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

没有JavaScript的需要。

Answer 20

除了选择本身之外，您可以禁用除当前所选选项之外的所有选项。 这给出了一个工作下拉菜单的外观，但只有你想要传递的选项是一个有效的选择。

Answer 21

html解决方案：

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

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

编辑：添加删除方法

Answer 22

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

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

Answer 23

我发现，使用普通的javascript（即：不需要JQuery库）的作品效果很好，就是将<select>标记的innerHTML更改为所需的单个剩余值。

之前：

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

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

后：

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

这样，没有visiual效果的变化，而这将POST / GET在<FORM> 。

Answer 24

如果选择下拉菜单从出生以来是只读的，并且根本不需要更改，那么也许应该使用另一个控件呢？ 像一个简单的<div> （加上隐藏的表单字段）或一个<input type="text"> ？

补充：如果下拉菜单始终不是只读的，并且JavaScript被用来启用/禁用它，那么这仍然是一个解决方案 – 只需修改DOM就可以了。

Answer 25

我能够得到这个工作，使用JavaScript创建只读选择选项控件。 我不得不隐藏选择框并创建一个新的隐藏字段。 我已将代码放在我的网站上供任何人用作参考。 HTML只读选择： http : //www.codepug.com/readonlySelect.html

干杯， – X。

Answer 26

下面为我​​工作：

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

Answer 27

我通过隐藏选择框并在只显示信息值的地方显示一个span来管理它。 在禁用.readonly类的事件中，我们还需要删除.toVanish元素并显示.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() } }); 

Answer 28

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

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

您可以使用javascript变量来执行类似操作，而无需使用expando属性。

Answer 29

这里试图使用自定义的jQuery函数来实现功能（如下所述）：

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

Answer 30

     var selectedOpt; //初始化var
     var newIdForHidden; //初始化var
     $（ 'disabledOnEdit'）。的focusIn（函数（）{
         selectedOpt = $（this）.find（“：selected”）。val（）;
         newIdForHidden = $（this）.attr（'id'）+'Hidden';
         //警报（selectedOpt + '' + newIdForHidden）;
         $（本）.append（ ''）;
         $（本）.find（ 'input.hiddenSelectedOpt'）ATTR（ '身份证'，newIdForHidden）.VAL（selectedOpt）。
     }）;
     $（ 'disabledOnEdit'）。事件的内容（函数（）{
         var oldSelectedValue = $（this）.find（'input.hiddenSelectedOpt'）。val（）;
         $（本）.VAL（oldSelectedValue）;
     }）;