Блог

У меня есть 10 строк таблицы html. В каждой строке у меня есть 1 флажок и 2 поля ввода, каждый элемент с уникальным идентификатором (AA, Price_1, RTprice_1, AB, Price_2, RTprice_2 ….AJ, Price_10, RTprice_10)

Попытка отключить соответствующие поля ввода, как только установлен флажок. Я повторяю функцию для каждой строки. Как я могу передать каждую группу переменных в приведенную ниже функцию вместо того, чтобы иметь 10 функций? Скрипт:

 document.getElementById("AA").onchange = function() {
document.getElementById('price_1').disabled = !this.checked;
document.getElementById('RTprice_1').disabled = !this.checked;
document.getElementById('price_1').value = "0";
document.getElementById('RTprice_1').value = "0";
document.getElementById('AA').value = "0";
};  

                                       
document.getElementById("AB").onchange = function() {
document.getElementById('price_2').disabled = !this.checked;
document.getElementById('RTprice_2').disabled = !this.checked;
document.getElementById('price_2').value = "0";
document.getElementById('RTprice_2').value = "0";
document.getElementById('AB').value = "0";};
  

 <input id='1' onchange="changeUI(1)" />                    // AA
   <input class='inputfield' id='inputfield1-1' />         // price_1
   <input class='inputfield' id='inputfield1-2'/>          // RTprice_1

<input id='2' onchange="changeUI(2)" />                   // AB
   <input class='inputfield' id='inputfield1-2'/>         // price_2
   <input class='inputfield' id='inputfield1-2'/>         // RTprice_2
... 
<input id='10' onchange="changeUI(10)" />
   ...
  

Ваша функция

 function changeUI(x) {
    var id = x;
    $('.inputfield').hide();
    
    $('#inputfield1-'   x).show();
    $('#inputfield2-'   x).show();

    $('#inputfield1-'   x).val("0");
    $('#inputfield2-'   x).val("0");
    $('#'   x).val("0");
    });
  

Вместо выбора каждого ввода по отдельности, выполните итерацию по tr s и выполните скрипт переключения.

 const table = document.querySelector('#yourTable');
const rows = table.querySelectorAll('tr');

rows.forEach((item) => {
    const txtCheckbox = item.querySelector('.txtCheckbox');
    const inputs = item.querySelector('.txtInput');

    txtCheckbox.addEventListener('change', e => {
        if(e.currentTarget.checked) {
            // Any other script if checkbox is unchecked.
            inputs.forEach((input) => input.removeAttribute('readonly'));
        } else {
            // Any other script if checkbox is checked.
            inputs.forEach((input) => input.setAttribute('readonly', true));
        }
    });
});