Включить текстовое поле с al oop, если отмечено

Question

Как я могу включить мое текстовое поле в пределах oop, когда оно установит флажок? Ребята, вы можете мне помочь, как это сделать.

 <table class="table table-bordered table-hover mt-2">
        <thead>
            <tr>
                <th>Select</th>
                <th>Duties and Responsibilities</th>
                <th>Weight of Duties</th>
                <th>Rate of Department Head</th>
                <th>Remarks</th>
            </tr>
        </thead>
        <tbody>

            @for (int x = 0; x <= 7; x++)
            {
            <tr>
                <td><input type="checkbox" class="form-control" /></td>
                <td><input type="text" name="JdDescription" class="form-control" disabled/></td>
                <td><input type="text" readonly name="WeightofDuties" class="form-control" /></td>
                <td><input type="text" name="RateofHead" class="form-control" disabled/></td>
                <td><input type="text" name="Remarks" class="form-control" disabled/></td>
            </tr>
                    }

            </tbody>
    </table>

Answer 1

Извлеките родительский элемент <tr>, установив флажок, затем включите ввод текста в этом узле <tr>:

$('input[type=checkbox]').change(function () {
  var disabled = this.checked ? '' : 'disabled';
  $(this).parents('tr').find('input[type=text]').prop('disabled', disabled);
});

Это также отключит поля ввода [type = text] снова при снятии флажка флажок. Если вы хотите включить только указанное текстовое поле c, измените аргумент селектора .find('input[type=text]') соответствующим образом.

Если вы также хотите переключить текстовое поле readonly, сделайте это следующим образом:

$(this).parents('tr').find('input[name="WeightofDuties"]')
       .attr('readonly', !this.checked);