两个输入元素和两个按钮上的 JQuery 类选择器

Question

我在两个输入文本元素（即readonly）和两个按钮上使用JQuery，这样当单击按钮1 时仅输入1 应该变为读/写。并且，当单击按钮 2 时，only 输入 2 应该变为读/写。并且当再次单击相应的按钮时，相应的输入应该再次变为只读。但是无论单击哪个按钮，我的以下脚本都会更改两个输入的只读属性。我认为应该只为该特定输入触发一个事件，正如用户 here 此处所解释的那样。

注意：我知道我们可以使用 id 代替类选择器，但在我的实际场景中，输入和按钮标签是通过循环动态生成的，数据来自数据库。因此，我们不知道每次会创建多少这样的元素。而且，正如上述链接中的用户指出的那样，对应的按钮只应触发一次单击事件。因此，问题实际上是我们如何实现这种情况，因为下面给出的示例在这种情况下不起作用。

HTML：

<table>
    <tbody>
        <tr>
            <td>
                <input class="txtInput" type="text" name="test1" value="test1val" readonly/>
            </td>
            <td>
                <input type="button" class="btnEdit" name="editName" value="Edit"/>
            </td>
        </tr>
        <tr>
            <td>
                <input class="txtInput" type="text" name="test2" value="test2val" readonly />
            </td>
            <td>
                <input type="button" class="btnEdit" name="editName" value="Edit" />
            </td>
        </tr>
    </tbody>
</table>

JQuery：

$(document).ready(function () {
    $('.btnEdit').click(function () {
        if ($('.txtInput').prop('readonly')) {
            $('.txtInput').removeAttr('readonly');
        }
        else {
            $('.txtInput').attr('readonly', 'readonly')
        }
    });
});

页面展示：

Answer 1

可以定位点击按钮的前一个TD，找到输入

$(document).ready(function () {
    $('.btnEdit').on('click', function () {
        $('table .txtInput').prop('readonly', true);
        var elem = $(this).closest('td').prev('td').find('.txtInput');
        elem.prop('readonly', function(_,state) { return !state });
    });
});

input[readonly] {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td><input class="txtInput" type="text" name="test1" value="test1val" readonly/></td>
            <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
        <tr>
            <td><input class="txtInput" type="text" name="test2" value="test2val" readonly /></td>
            <td><input type="button" class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
    </tbody>
</table>

Answer 2

我对它的编码与 adeneo 略有不同。我会去最近的行，然后找到这样的文本：

$(document).ready(function () {
    $('.btnEdit').on('click', function () {

        var elem = $(this).closest('tr').find('.txtInput');
        elem.prop('readonly', function(_,state) { return !state });
    });
});

或者，您可以在按钮上设置一个属性，其中包含您想要更改的文本框的 id，因此 html 必须更改为具有 id：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td><input class="txtInput" id='txt1' type="text" name="test1" value="test1val" readonly/></td>
            <td><input type="button" txtid='#txt1' class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
        <tr>
            <td><input class="txtInput" id='txt2' type="text" name="test2" value="test2val" readonly /></td>
            <td><input type="button" txtid='#txt2' class="btnEdit" name="editName" value="Edit" /></td>
        </tr>
    </tbody>
</table>

而 javascript 将是：

$(document).ready(function () {
    $('.btnEdit').on('click', function () {
        var txtid = $(this).attr('txtid');
        $(".txtInput").each(function(){
              if ($(this).attr('id')!=txtid)   
              {
                  $(this).prop('readonly',true);
              }
        });
        var elem = $();
        elem.prop('readonly', function(_,state) { return !state });
    });
});

Answer 3

我会为每个按钮设置一个自定义数据属性，方式如下：

       <td><input class="txtInput" type="text" id="test2" name="test2" value="test2val" readonly /></td>
        <td><input type="button" class="btnEdit" data-attr-target="test2" name="editName" value="Edit" /></td>

然后您可以在点击处理程序中请求该自定义属性。

$('.btnEdit').click(function(){
    var target = $(this).data('attr-target');
    var input = $(target);
    input.attr('readonly', readonly);
});

您提到这些元素是动态生成的。我认为拥有动态 ID 没有问题。生成输入时，您可能有一个类似 id 的“inputName_index”。