1

Доброго времени суток, как можно блокировать определённый input после выбора определённого пункта из меню select имеется вот такой select

<select name="test" id="test">
<option value="dlina">Длина</option>
<option value="shirina">Ширина</option>
<option value="tolchina">Толщина</option>
</select>

И имеется вот такие input'ы

Укажите толщину (мм): <input type="text" name="h" id="h" value="0"  />
Укажите кол-во отверстий: <input type="text" id="hole" value="0">
Укажите длину реза (мм): <input type="text" id="cut" value="0">

Допустим если в select я выбираю Толщину то мне нужно чтобы поле hole(кол-во отверстий) стало неактивно для ввода

4
  • в вашем прошлом ответе фигурировал тэг jquery, в этом он не нужен случаем?
    – teran
    4 апр 2018 в 8:00
  • Можно и с jquery, разницы я особой не вижу если честно, мало еще опыта чтобы понимать что да как(
    – st1mset
    4 апр 2018 в 8:14
  • разница в том, что вам либо напишут ответ на jquery, либо будете ждать ответа на чистом js.
    – teran
    4 апр 2018 в 8:21
  • Понял спасибо, буду иметь ввиду)
    – st1mset
    4 апр 2018 в 8:23

1 ответ 1

1

Тем или иным способом вам необходимо сопоставить пункты селекта и те инпуты, которые нужно отключать. В примере ниже сопоставление на основе дата атрибута, где перечислены идентификаторы отключаемых инпутов.

В принципе при таком подходе, в дата-атрибуте указвыается jquery-селектор, что дает возможность отключать инпуты не только по индентификатору, но и по классу, и по атрибутам, т.е. используя все те же селекторы.

$("#test").change(function(){
   var disable = $(this).children("option:selected").data('disable');
   
   $("input").prop('disabled', false);
   
   if(disable != undefined){
      $(disable).val(null).prop('disabled', true);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" id="test">
  <option value="dlina">Длина</option>
  <option value="shirina">Ширина</option>
  <option value="tolchina" data-disable="#hole,#cut">Толщина</option>
</select>


<div>
  Укажите толщину (мм): <input type="text" name="h" id="h" value="0"  /><br>
  Укажите кол-во отверстий: <input type="text" id="hole" value="0"><br>
  Укажите длину реза (мм): <input type="text" id="cut" value="0"><br>
</div>

4
  • поставил минус - напиши в чем претензия (:
    – teran
    4 апр 2018 в 7:58
  • у Вас какой-то фарш в коде - зачем переменную вводить? зачем блокировать ВСЕ инпуты? зачем переменную на undefined проверять? откуда там вообще undefined возьмётся? :)) 4 апр 2018 в 8:08
  • Спасибо данный способ работает, осталось только с css определиться чтобы поле какой нить закрашенное было
    – st1mset
    4 апр 2018 в 8:08
  • @humster_spb все инпуты не блокируются, а разблокируются. Вы же хотите, чтобы при смене на другой пункт прежние блокировки снялись? проверять на undefined надо, поскольку именно такое значение она будет иметь при отсутствии data-атрибута.
    – teran
    4 апр 2018 в 8:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.