Как включить ввод текста после нажатия соответствующей радиокнопки в Bootstrap 4? - PullRequest
Новая
       43

Как включить ввод текста после нажатия соответствующей радиокнопки в Bootstrap 4?

1 голос
/ 29 октября 2019

Я использую Bootstrap 4 и разрабатываю форму отправки макета в моем веб-приложении. В строке транзакции ввод текста для цены по умолчанию отключен. Что мне делать, если я включаю ввод текста после нажатия кнопки «продать»? 

<div class="form-inline">
   <div class="form-group">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="free" name="customRadioInline1" class="custom-control-input" checked>
            <label class="custom-control-label" for="free">Free</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="sell" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="sell">Sell</label>
      </div>
   </div>
   <label for="price">Price</label>
   <input type="text" class="form-control" id="price" placeholder="HKD" disabled>
</div>

Я ожидаю, что будет какой-то код, который включает в себя «onclick» и «add.eventListener» на «продать»радио-кнопка при написании JS, но я не знаю, как кодировать, чтобы разрешить ввод цены после выбора кнопки продажи и отключить ее по умолчанию (т. е. бесплатно).

Или есть какой-нибудь простой способс Bootstrap 4?

Спасибо за помощь.

1 Ответ

1 голос
/ 29 октября 2019

Сначала вы можете настроить таргетинг на все радиостанции с помощью Document.querySelectorAll(). Затем прокрутите их с помощью forEach(), чтобы прикрепить событие (щелчок). Внутри функции обработчика событий вы можете проверить id переключаемой кнопки, на основе которой вы можете установить / удалить атрибут (disabled).

Попробуйте следующим образом: 

var radios = document.querySelectorAll('[name=customRadioInline1]');
Array.from(radios).forEach(function(r){
  r.addEventListener('click', function(){
    var priceEl = document.getElementById('price');
    if(this.id == 'sell')
      priceEl.removeAttribute('disabled');
    else
      priceEl.setAttribute('disabled', 'disabled');
  });
});
<div class="form-inline">
   <div class="form-group">
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="free" name="customRadioInline1" class="custom-control-input" checked>
            <label class="custom-control-label" for="free">Free</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
         <input type="radio" id="sell" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="sell">Sell</label>
      </div>
   </div>
   <label for="price">Price</label>
   <input type="text" class="form-control" id="price" placeholder="HKD" disabled>
</div>
...