根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
除了禁用不应该是可选的选项,我想实际上让他们从列表中消失,但仍然能够启用他们,我应该以后需要:
$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);
它会找到所有带有只读属性的select元素,然后找到那些未被选中的select元素中的所有选项,然后隐藏它们并禁用它们。
出于性能考虑,将jquery查询分为2是很重要的,因为jquery从右向左读取它们,代码如下:
$("select[readonly] option:not(:selected)")
将首先找到文档中所有未选中的选项,然后筛选那些在具有只读属性的选择内的选项。
其他回答
下面是一个尝试使用自定义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);
});
我知道这不会帮助每个人(如果你只是客户端),但会帮助一些全栈和控制后端以及前端的人。
如果用户没有编辑字段的特权,我只返回下拉列表的当前选择。
以下是我的后端控制器:
#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
简单的CSS解决方案:
select[readonly]{
background: #eee;
cursor:no-drop;
}
select[readonly] option{
display:none;
}
这导致在选择是灰色的漂亮的“禁用”光标悬停 在选择选项列表是“空”,所以你不能改变它的值。
一种简单的服务器端方法是删除所有选项,只删除希望被选中的选项。因此,在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);
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); });