简体   繁体   中英

Enable inputs after disabled

I want to Enable all this group of disabled inputs when clicking on <button class="btn_modifier">MODIFIER</button> . See below my inputs:

stock_array.forEach(function (element) {
    if (element.choix_type == "1") {
        content1 +=
            `<tr>
            <div class="show">
        <td><input type="text" class="input_stock" value="${element.nom}" disabled /></td>
        <td><input type="text" class="input_stock" value="${element.quantite}" disabled /></td>
        <td><input type="number" class="input_stock" value="${element.prix_achat_ht}" disabled /></td>
        <td><input type="number" class="input_stock" value="${element.prix_vente_ht}" disabled /></td>
        <td><input type="number" class="input_stock" value="${element.marge_ht = element.prix_vente_ht - element.prix_achat_ht}" disabled /></td>
        <td><input type="number" class="input_stock" value="${element.prix_ttc = element.prix_vente_ht * 1.2}" disabled /></td>
        <td><input type="text" class="input_stock" value="${element.degre}" disabled  /></td>
        <td>
        </div>
            <div class=btn_div>
                <button class="btn_modifier">MODIFIER</button>
                <button class="btn_delete">X</button>
            </div>
        </td>
        </tr>`
        ba.innerHTML = content1;

    }
}

I already try this:

let modifier = document.querySelector(".btn_modifier");
let able = document.querySelector(".input_stock");
modifier.addEventListener("click", function () {
    able.disable = false;
})

You should use document.querySelectorAll to get all elements with the class input_stock (or getElementsByClassName ), and enable each one of them using a loop:

const inputs = document.querySelectorAll('.input_stock');
for (const input of inputs) {
    input.disabled = false;
}
let modifier = document.querySelector(".btn_modifier");

modifier.addEventListener("click", function () {
  let able = document.querySelectorAll(".input_stock");
  // converts NodeList to Array
  [...able].forEach(a => a.disabled = false);
})

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM