如何使 html <select> 元素看起来像“禁用”，但传递值？

Posted 2023-02-22

【中文标题】如何使 html <select> 元素看起来像“禁用”，但传递值？

【英文标题】：How to make html <select> element look like "disabled", but pass values?

【发布时间】：2012-09-27 23:48:14

【问题描述】：

当我禁用一个

<select name="sel" disabled>
    <option>123</option>
</select>

元素，它没有传递它的变量。

如何使它看起来像禁用，但处于“正常”状态？

这是因为我有一个“选择”列表，有时其中一些只有一个值，所以用户应该明白它只有一个值而不点击它。

【问题讨论】：

他们只关注元素，看到单个选项然后接受只有一个选项还不够吗？如果他们不能对元素做任何事情，只需使用带有readonly 属性的常规input 或隐藏输入。

如果它只有一个选项，为什么它需要在表单中？另外，请注意，不知情的用户将能够轻松更改选择值。

@WebnetMobile.com：我很高兴，但不知道是什么

@EL2002，听起来您正在依靠表单来返回您需要的特定值。您是否认为用户可以在该 元素中发送任何值？始终检查您的表格。如果只有一个可能的值，你根本不应该关心它：无论如何程序都会自动填充它，因为它不应该允许选择任何其他值！

有时 OP 的请求是完全可取的行为。例如。当通常有许多选项可用时，但表单上其他选项的某些组合仅允许 1 个特定选项。选择该选项并禁用该控件将远远优于其他 javascript 恶作剧。

【参考方案1】：

如果您不想添加 attr disabled 可以通过编程方式完成

可以使用以下代码将版本禁用到<select class="yourClass"> 元素中：

//bloqueo selects
  //block all selects
  jQuery(document).on("focusin", 'select.yourClass', function (event) 
    var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
    setTimeout(function() $selectDiabled.removeAttr("disabled"); , 30);
  );

如果你想试试，可以在这里看到：https://jsfiddle.net/9kjqjLyq/

【参考方案2】：

我的解决方案是在 CSS 中创建一个禁用的类：

.disabled 
    pointer-events: none;
    cursor: not-allowed;

然后您的选择将是：

<select name="sel" class="disabled">
    <option>123</option>
</select>

用户将无法选择任何值，但选择值仍会在表单提交时传递。

【讨论】：

这样您仍然可以使用 TAB 导航到选择，然后使用键盘上/下箭头键更改其选择的选项。

另外IE不支持pointer-events，你还是可以用鼠标导航的。

【参考方案3】：

哇，我遇到了同样的问题，但是一行代码解决了我的问题。我写了

$last_child_topic.find( "*" ).prop( "disabled", true );
$last_child_topic.find( "option" ).prop( "disabled", false );   //This seems to work on mine

我将表单发送到一个 php 脚本，然后它打印每个选项的正确值，而它之前是“null”。

告诉我这是否可行。我想知道这是否只对我有效。

【参考方案4】：

可以使用与禁用列表具有相同名称和值的附加隐藏输入元素。这将确保在 $_POST 变量中传递值。

例如：

<select name="sel" disabled><option>123</select>
<input type="hidden" name="sel" value=123>

【讨论】：

这不是一个解决方案，但它是一个替代方案。

【参考方案5】：

<select id="test" name="sel">
  <option disabled>1</option>
  <option disabled>2</option>
</select>   

或者你可以使用 jQuery

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

【讨论】：

这要好得多，因为它不需要在提交之前取消设置禁用。

注意，您需要在设置属性之前添加.not(":selected")，以保持选中项处于启用状态。

【参考方案6】：

如果您可以为您的选择提供默认值，那么您可以对未选中的复选框使用相同的方法，这需要在实际元素之前隐藏输入，因为如果未选中，这些复选框不会发布值：

<input type="hidden" name="myfield" value="default" />
<select name="myfield">
    <option value="default" selected="selected">Default</option>
    <option value="othervalue">Other value</option>
    <!-- ... //-->
</select>

如果选择被 javascript（或 jQuery）禁用，或者即使您的代码编写 html 使用属性禁用元素本身，这实际上将发布值“默认”（显然不带引号）： disabled="disabled" .

【讨论】：

认为这是对已接受答案的更好解决方案.. 有没有人对此有任何反对意见？

【参考方案7】：

您可以根据需要将其保持禁用状态，然后在提交表单之前删除 disabled 属性。

$('#myForm').submit(function() 
    $('select').removeAttr('disabled');
);

请注意，如果您依赖此方法，您还需要以编程方式禁用它，因为如果 JS 被禁用或不受支持，您将被禁用选择卡住。

$(document).ready(function() 
    $('select').attr('disabled', 'disabled');
);

【讨论】：

这似乎是唯一的解决方案。

@EL2002 如果您真的对仅包含一个选项的选择行为不满意，那么我能想象的唯一其他解决方案就是使用 CSS 来模仿禁用的外观，正如 Praveen 建议的那样

禁用后，用户将无法提交数据。你这样好吗？

在提交表单时包含禁用的表单字段是严格违反 HTML 标准的

@EL2002 我不关注。上面的解决方案应该工作得很好。

【参考方案8】：

添加一个类.disabled并使用这个CSS：

​.disabled border: 1px solid #999; color: #333; opacity: 0.5;
.disabled option color: #000; opacity: 1;​

演示：http://jsfiddle.net/ZCSRq/

【讨论】：

Praveen，thanx，我已经试过了，很方便，但是“select”有打开列表的箭头，在禁用状态下是灰色的。并且未启用。

对不起，我的错。更新了@EL2002的答案请看一下。

谢谢，但它看起来不像已禁用，抱歉 =(