Enable inputs after disabled-CodePudding

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;
})

CodePudding user response：

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

CodePudding user response：

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);
})