检查是否使用jquery在td中选中了特定的复选框

check to see if a particular checkbox is checked in a td using jquery

本文关键字：复选框 td 是否 jquery 检查      更新时间：2023-09-26

我正试图使文本框只读或不只读，这取决于personalLoan复选框的值。如果选中personalLoan复选框，我希望文本不是只读的。如果未选中，则我希望文本框为只读。这是的其中一行

<tr id="mytableRows">
    <td class="even"><input type="checkbox" value="true" name="homeLoan"  ></td>
    <td class="odd"><input type="checkbox" value="true" name="autoLoan"  ></td>
    <td class="even"><input type="checkbox"  value="true" name="personalLoan"  ></td>
    <td class="odd"><input type="checkbox"  value="true" name="noLoan"  ></td>
    <td class="odd"><input type="text" name="peronalAmount" value="1"  readonly></td>
</tr>

到目前为止，我有这个代码

$(document).ready(function(){
    $('.test tr').click(function (event) {
        $(this).find(':checkbox').each(function(p){
            if($(this).attr('name') == 'personalLoan'){
                if ($(this).is(':checked')) {
                    alert("checked");
                }else{
                    alert("unchecked");
                }
            }
         });
    });
});

这告诉我复选框的当前状态，但我真正需要的是知道personalLoan复选框的更改，这样我就可以使文本框只读或不在该行（td）中

感谢

为了我自己的理智，以下是我对解决方案的理解。

$('input[type=checkbox]', '.test').on('change', function(e) {
    if (this.name === 'personalLoan') {
       $(this).parents('tr').find('input[type=text]').prop('readonly', !this.checked);
    }
});

假设一个表具有类test，则在选中personalLoan时允许输入，在未选中时切换为只读。

jsFiddle上的演示。（我用红色突出显示了复选框。）

如果不是这样，那么我真的不知道你想做什么。

在我看来，您真正想要的是单选按钮，而不是复选框，并且如果用户选择"无贷款"，则金额字段应设置为禁用，而不是只读。

无论如何，这里有一个你可以采取的方法。为了方便起见，我把代码放在了第行，它可以在jQuery或任何你想要的东西中重新实现，这只是一个如何做你想做的事情的例子。

使用超时是为了使单击事件可以用于表单中的任何元素，包括重置按钮。

<form  onclick="
  var form = this;
  setTimeout(function() {
    form.personalAmount.readOnly = form.loanType[3].checked;
  },0);
 ">
 <table>
  <tr>
    <td><input type="radio" value="homeLoan" name="loanType">Home</td>
    <td><input type="radio" value="autoLoan" name="loanType">Auto</td>
    <td><input type="radio" value="personalLoan" name="loanType">Personal</td>
    <td><input type="radio" value="true" name="loanType">None</td>
    <td><input type="text" name="personalAmount" readonly></td>
  <tr>
    <td colspan="4">
      <input type="reset">
 </table>
</form>
相关文章：