Заполнять и выключать текстовый input при переключении select

Question

На странице есть два input-а, которые заполняются значениями времени в формате 00:00. Это "Время работы с" и "Время работы до".
Ниже есть переключатель select "Круглосуточно" Да/Нет. Соответственно, value="0" и value="1".

<table>
  <tr id="xfield_holder_timejobot" uid="essential" style="">
    <td class="addnews">Время работы с: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="text" name="xfield[timejobot]" id="xf_timejobot" data-alert="Время работы с" value="" rel="essential" data-rel="calendartime"></td>
  </tr>

  <tr id="xfield_holder_timejobdo" uid="essential" style="">
    <td class="addnews">Время работы До: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="text" name="xfield[timejobdo]" id="xf_timejobdo" data-alert="Время работы До" value="" rel="essential" data-rel="calendartime"></td>
  </tr>

  <tr id="xfield_holder_time24" style="">
    <td class="addnews">Круглосуточно:</td>
    <td class="xfields">
      <select name="xfield[time24]">
        <option value="1">Да</option>
        <option value="0" selected="">Нет</option>
      </select>
    </td>
  </tr>
</table>

Нужно, при выборе "Круглосуточно" - Да (value="1"), чтобы оба input-а заполнялись значением 00:00 и становились недоступными для редактирования.

Answer 1

Ваша задача тривиальна, код для этого прост и понятен без комментариев:

document.querySelector('#xfield_holder_time24 select').addEventListener('change', function() {
  if (this.options[this.options.selectedIndex].value == "1") {
    xf_timejobot.disabled = 1; xf_timejobot.value = "00:00";
    xf_timejobdo.disabled = 1; xf_timejobdo.value = "00:00";
  } else {
    xf_timejobot.disabled = 0;
    xf_timejobdo.disabled = 0;
  }
});

<table>
  <tr id="xfield_holder_timejobot" uid="essential" style="">
    <td class="addnews">Время работы с: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="text" name="xfield[timejobot]" id="xf_timejobot" data-alert="Время работы с" value="" rel="essential" data-rel="calendartime" placeholder="00:00"></td>
  </tr>
  <tr id="xfield_holder_timejobdo" uid="essential" style="">
    <td class="addnews">Время работы До: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="text" name="xfield[timejobdo]" id="xf_timejobdo" data-alert="Время работы До" value="" rel="essential" data-rel="calendartime" placeholder="00:00"></td>
  </tr>
  <tr id="xfield_holder_time24" style="">
    <td class="addnews">Круглосуточно:</td>
    <td class="xfields">
      <select name="xfield[time24]">
        <option value="1">Да</option>
        <option value="0" selected="">Нет</option>
      </select>
    </td>
  </tr>
</table>

Но, правильнее было бы использовать возможности HTML5, в частности <input type="time">. Это упростит ввод и валидацию, а также задействует специфические формы ввода на мобильных устройствах, в ряде случаев.

Следующий момент - это "зануление" полей, при их недоступности. Пользы это не несёт никакой, кроме визуальной составляющей, так как поля с disabled всё равно не попадают в отправку формы, а если передумали и тут же захотели вернуть всё обратно, то придётся заново вбивать параметры.

Если же хочется и "занулить" и иметь возможность вернуть введённое ранее, то можно добавить дополнительный пользовательский атрибут (в примере ниже, это data-hold="") и сохранять в нём значение перед обнулением. И наоборот, брать из него значение для value, при возвращении <input> к активному состоянию:

document.querySelector('#xfield_holder_time24 select').addEventListener('change', function() {
  if (this.options[this.options.selectedIndex].value == "1") {
    xf_timejobot.disabled = 1; xf_timejobot.dataset.hold = xf_timejobot.value; xf_timejobot.value = "00:00:00";
    xf_timejobdo.disabled = 1; xf_timejobdo.dataset.hold = xf_timejobdo.value; xf_timejobdo.value = "00:00:00";
  } else {
    xf_timejobot.disabled = 0; xf_timejobot.value = xf_timejobot.dataset.hold;
    xf_timejobdo.disabled = 0; xf_timejobdo.value = xf_timejobdo.dataset.hold;
  }
});

<table>
  <tr id="xfield_holder_timejobot" uid="essential" style="">
    <td class="addnews">Время работы с: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="time" name="xfield[timejobot]" id="xf_timejobot" data-alert="Время работы с" value="00:00:00" rel="essential" data-rel="calendartime" data-hold=""></td>
  </tr>
  <tr id="xfield_holder_timejobdo" uid="essential" style="">
    <td class="addnews">Время работы До: <span style="color:red;">*</span></td>
    <td class="xfields"><input type="time" name="xfield[timejobdo]" id="xf_timejobdo" data-alert="Время работы До" value="00:00:00" rel="essential" data-rel="calendartime" data-hold=""></td>
  </tr>
  <tr id="xfield_holder_time24" style="">
    <td class="addnews">Круглосуточно:</td>
    <td class="xfields">
      <select name="xfield[time24]">
        <option value="1">Да</option>
        <option value="0" selected="">Нет</option>
      </select>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Заполнять и выключать текстовый input при переключении select

Ответы (1 шт):