Saya menggunakan Bootstrap 4 dan merancang formulir pengiriman barang tiruan di aplikasi web saya. Di baris transaksi, input teks untuk harga dinonaktifkan secara default. Apa yang harus saya lakukan jika saya mengaktifkan input teks setelah mengklik tombol 'jual'?

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

Saya berharap akan ada beberapa kode yang menyertakan 'onclick' dan 'add.eventListener' pada tombol radio 'sell' saat menulis JS, tetapi saya tidak tahu cara membuat kode sehingga memungkinkan mengetik harga setelah memilih tombol jual, dan tetap dinonaktifkan saat default (yaitu gratis).

Atau, apakah ada cara mudah dengan Bootstrap 4?

Terima kasih untuk bantuannya.

1
ronzenith 29 Oktober 2019, 13:11

2 jawaban

Jawaban Terbaik

Anda dapat menargetkan semua radio terlebih dahulu dengan Document.querySelectorAll(). Kemudian ulangi dengan forEach() untuk melampirkan acara (klik). Di dalam fungsi event handler, Anda dapat memeriksa id tombol radio yang diklik berdasarkan mana Anda dapat mengatur/menghapus atribut (disabled).

Cobalah cara berikut:

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>
1
Mamun 29 Oktober 2019, 10:55

Dalam javascript, Anda dapat menggunakan document.getElementById("sell").setAttribute("disabled", false); di dalam fungsi yang Anda panggil dengan mengklik tombol Anda

0
Maudiy 29 Oktober 2019, 10:17