У меня есть поле выбора 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 делают то, для чего они предназначены. Но в дополнение к простому отключению поля в методе отключения я также хотел бы, чтобы поле говорило «недоступно» при отключении. Я не мог найти способ показать что-то подобное в поле выбора, не имея возможности. Итак, лучшее решение - добавить параметр для выбора в методе отключения и установить его как выбранный, а затем удалить его в методе включения или есть что-то более чистое?

0
user1985273 2 Янв 2018 в 23:56

2 ответа

Лучший ответ

Вы можете объединить обе функции в одну.

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>
2
Mikey 3 Янв 2018 в 05:23

Поскольку вам не нужна опция в поле выбора. Просто используйте 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>
1
Jonathan Chaplin 2 Янв 2018 в 21:24