Question

我有一个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>

现在调用启用和禁用方法可以执行它们的用途。但除了在禁用方法中禁用该字段之外，我还希望该字段说＆＃34;不可用＆＃34;什么时候禁用我找不到在选择字段中显示这样的东西的方法而没有实际的选项。那么是在select in disable方法中添加一个选项并将其设置为选中的最佳解决方案，然后在启用方法中将其删除，或者是否有更清洁的选项？

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

Answer 2

由于您不想在选择框中选择一个选项。只需使用display:none;即可显示和隐藏值为“不可用”的文本框。

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>

禁用选择字段并显示＆＃34;禁用＆＃34;作为选择的选项

2 个答案: