禁用选择字段并将“禁用”显示为选定选项答案

【问题标题】：Disabling select field and showing "disabled" as selected option禁用选择字段并将“禁用”显示为选定选项
【发布时间】：2018-01-02 20:56:45
【问题描述】：

我有一个 html 选择字段和两种 javascript 方法 - 一种用于启用选择字段，另一种用于启用：

enable(){
  $('#s').prop('disabled', false);
}

disable(){
  $('#s').prop('disabled', true);
}

<select id="s">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

现在调用 enable 和 disable 方法可以完成它们的用途。但除了在禁用方法中禁用该字段之外，我还希望该字段在禁用时显示“不可用”。如果没有实际选择，我找不到在选择字段中显示类似内容的方法。那么，最好的解决方案是在 disable 方法中向 select 添加一个选项并将其设置为选中，然后在 enable 方法中将其删除，还是有更清洁的可用方法？

【问题讨论】：

为什么不隐藏元素并在文本的位置显示另一个元素？
提供小提琴

标签： javascript jquery html

【解决方案1】：

您可以将这两个功能合并为一个。

function toggleDisabled() {
  var dropdown = $('#s');
  var disabled = dropdown.prop('disabled');
  if (!disabled) {
    // add option to the top of the list
    dropdown.prepend('<option>unavailable</option>');
  } else {
    // remove any option with no value
    $('option:not([value])', dropdown).remove();
  }
  // flip disabled and change current value to first
  dropdown.prop('disabled', !disabled).val($('option:first', dropdown).val());
}

// just for testing

$('button').click(function() {
  toggleDisabled();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<button>click me</button>

【讨论】：

我会删除您的 on 变量和 toggle 参数，然后检查下拉列表的禁用状态：jsfiddle.net/fcsjw28m
@JonP 好主意和更好的答案。我写的太快了。
随时将我的评论（小提琴）编辑到您的答案中，

【解决方案2】：

因为您不希望选择框中的选项。只需使用display:none; 即可显示和隐藏值为 Unavailable 的文本框。

function enable(){
  $('#s').css('visibility', "visible");
  $('#s_text').css("display", "none");
}

function disable(){
  $('#s').css('visibility', "hidden");
  $('#s_text').css("display", "inline");
}

<body>
<select id="s">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input id="s_text" style="display:none;" type="text" disabled value="Unavailble" />
<button onclick="enable();"> Enable</button>
<button onclick="disable();"> Disable </button>
</body>

【讨论】：