JQuery的类选择

Question

我使用JQuery对两个输入的文本元素（即是readonly）和两个按钮，使按钮1被点击时仅输入1应成为读/写。并且，当按钮2被点击时，只有输入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是没有问题的。在生成输入时，你可能有一个“inputName_index”类似的id。