Отключение определенных входов в таблице при нажатии кнопки

Question

В настоящее время у меня есть таблица, содержащая несколько значений, 2 поля ввода и кнопку для каждой строки в этой таблице. Я хочу, чтобы, когда я нажимаю кнопку в третьей строке, поля ввода в третьей строке становятся отключенными. Остальные строки должны оставаться незатронутыми. К сожалению, из-за характера программы добавление идентификаторов к входам и кнопкам невозможно.

Кто-нибудь знает, как это сделать?

<tr> 
    <td>Text A</td> 
    <td>Text B</td> 
    <td><input class="editable"></td> 
    <td>Text C</td> 
    <td><input class="editable></td> 
    <td>Text D</td> 
    <td><button class="disableInput">OK</button></td> 
<tr> 

У меня есть ~ 40 строк, как эта

Кроме того, из-за стола постоянно автосохранение в базу данных (для входа) таблица получает обновляется каждые ~ 0,5 секунды

Answer 1

$(tableId).on("click", "button", function(){ 
    $(this).closest("tr").find("input").attr("disabled", true); 
}) 

Answer 2

Вы может сделать это, пройдя DOM.

$('.disableInput').on('click',function(){      
 
    var input = $(this).closest('tr').find('input'); 
 
    var currstatus = input.prop('disabled'); 
 
    input.prop('disabled',!currstatus); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><input type="text" name="somthing[]"></td> 
 
    <td><input type="text" name="something[]"></td> 
 
    <td><button class="disableInput">Toggle Input</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="somthing[]"></td> 
 
    <td><input type="text" name="something[]"></td> 
 
    <td><button class="disableInput">Toggle Input</button></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" name="somthing[]"></td> 
 
    <td><input type="text" name="something[]"></td> 
 
    <td><button class="disableInput">Toggle Input</button></td> 
 
    </tr> 
 
</table>

Answer 3

Поскольку вы используете JQuery, вы можете сделать что-то вроде этого:

$(document).ready(function() { 
 
    $("table td .btn").click(function() { 
 
    if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){ 
 
     $(this).closest("tr").find("input").removeAttr("disabled", "disabled"); 
 
     $(this).closest("tr").find("button").text("Disbale"); 
 
    } 
 
    else{ 
 
     
 
     $(this).closest("tr").find("input").attr("disabled", "disabled"); 
 
     $(this).closest("tr").find("button").text("Enable"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <button class="btn" type="button" />Disable</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <button class="btn" type="button" />Disable</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <input type="text" /> 
 
     </td> 
 
     <td> 
 
     <button class="btn" type="button" />Disable</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>