Javascript 如何在jquery中加载页面时禁用所有复选框？

我正在处理这张表，每行都有复选框。基本上，我希望在页面加载后禁用所有电子邮件输入字段。如果用户单击属于某行的复选框，则应启用该行的电子邮件输入字段，以便用户可以键入电子邮件。最后，如果用户单击“全选”复选框，则应启用/禁用所有输入字段。由于某些原因，我只能在页面加载后禁用第一个、第二个和最后一个输入字段。我的全选复选框也不能正常工作：（。有人能告诉我我做错了什么吗？提前谢谢

          var users = $("tr")
                    .filter(function () {
                        return $(this).find('.inputEmail').val() !== "" && $(this).find(".input_checkbox").is(':checked');
                    })
                    .map(function () {
                        var $row = $(this);
                        return {
                            firstName: $row.find('.fullName').text(),
                            number: $row.find('.usersPhoneNumber').text(),
                            email: $row.find('.inputEmail').val()
                        }
                    })
                    .get();
            console.log('Array containing all users with an email:');
            console.log(users);

这是我的代码-现场演示：

$（文档）.ready（函数（）{
$（“#checkAll”）.change（函数（）{
$（“.input_checkbox”）.prop（'checked'，$（this.prop（'checked'））.each（function（）{
启用\禁用\输入（此）；
var nameValue=$（this.attr（“name”）；
变量inputFieldNameValue=$.trim（nameValue）；
var inputFieldString=“客户名称inputField”；
变量inputFieldId=inputFieldNameValue+inputFieldString；
如果（$（this）.is（“：checked”））{
启用\禁用\输入（此）；
$（“#”+inputFieldId）.prop（'占位符'，“输入电子邮件地址”）；
}否则{
$（“#”+inputFieldId）.prop（'placeholder'，”）；
启用\禁用\输入（此）；
}
});
});
功能启用\禁用\输入（复选框）{
var input_id=checkbox.id.replace（'-checkbox'，'-inputField'）；
$（“#”+输入_id）.prop（'disabled'，！checkbox.checked））；
}
$（“.input_复选框”）.change（函数（）{
var nameValue=$（this.attr（“name”）；
变量inputFieldNameValue=$.trim（nameValue）；
var inputFieldString=“客户名称inputField”；
变量inputFieldId=inputFieldNameValue+inputFieldString；
如果（$（this）.is（“：checked”））{
启用\禁用\输入（此）；
$（“#”+inputFieldId）.prop（'占位符'，“输入电子邮件地址”）；
}否则{
$（“#”+inputFieldId）.prop（'placeholder'，”）；
启用\禁用\输入（此）；
}
});
$（“.input_复选框”）。每个（函数（）{
启用\禁用\输入（此）；
});
})；

全选


名称
电话#/分机
电子邮件
第一组
本·莫里斯
3033422109




迈克·杰夫
3037777777




第2组
安娜·麦克尤斯
3039899231




祖米娅·布朗
3033213453




第3组
布莱恩·史密斯
3033222098




少年白人
3030098342




彼得·麦克唐纳
3037777777




提交

显然是因为重复的ID

试试这个：

function enable_disable_input(checkbox) {
 $(checkbox).parents('tr').find('input[type="email"]').prop('disabled', !checkbox.checked);
}

---

你的代码看起来有点凌乱，像这样的东西可以工作，而且可读性更好

$(document).ready(function () {
            $("#checkAll").change(function () {
                $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function () {
                  var input = $(this).parent().parent().find("input[type='email']");
                  if ($(this).is(":checked")) {
                      $(input).prop('disabled', false);
                      $(input).prop('placeholder', "Enter email address");
                  }
                  else {
                      $(input).prop('placeholder', "");
                      $(input).prop('disabled', true);
                  }
                  });
            });
            $(".input_checkbox").change(function () {
                var input = $(this).parent().parent().find("input[type='email']");

                if ($(this).is(":checked")) {
                    $(input).prop('disabled', false);
                    $(input).prop('placeholder', "Enter email address");
                }
                else {
                    $(input).prop('placeholder', "");
                    $(input).prop('disabled', true);
                }
            });
            $('.inputEmail').each(function(){
               $(this).prop('disabled', true);
            })
        });

---

此外，您应该删除重复的ID。

您应该基于当前元素搜索电子邮件输入。您有重复的ID

试试这个：

$（this.closest（'tr'）.find（'input[type；”text“]）.attr（“disabled”，！this.checkbox）；

请注意，我已经花了一些时间来更新您的代码。希望对您有所帮助

获取数据 您可以尝试以下方法：

注意：我已经更新了

组标签

行，并在其中添加了类

$（“#提交按钮”）。在（“单击”，函数（）{
var result={}；
var group_id=“”；
$（“表tr”）。每个（函数（索引，行）{
变量$row=$（行）
group\u id=$row.hasClass（“节标签”）？$row.find（“td:first”）.text（）：group\u id；
if（group_id&&$row.find（“.input_checkbox”）是（“：checked”）&&&$row.find（“.inputEmail”）.val（）.trim（）！==”）{
结果[组id]=结果[组id]| |[]；
结果[组\ id]。推送({
firstName:$row.find（'.fullName'）.text（），
编号：$row.find（'.usersPhoneNumber'）.text（），
电子邮件：$row.find（'.inputEmail'）.val（）
});
}
});
console.log（结果）
})

它没有解决这个问题。你能分享任何像JSFIDLE或codepen这样的实时代码吗？谢谢你的回答不起作用。如果我点击每个复选框，那么属于该行的电子邮件输入字段应该被启用。你的回答没有做到这一点，当然它做到了：D，我在使用chrome，打开JSFIDLE，自己试试看！瞧：D非常感谢你的帮助！谢谢你的帮助兄弟！@HenryDev我已经更新了小提琴，只做了一些小改动。你最好使用

$（document.ready（））

作为一个

Init

函数，而不是对其中的所有内容都进行编码。非常感谢！在单击“提交”后，是否仍要创建一个包含每个组的数组？我需要该数组，以便使用ajax将其发送到我的服务器您只需要电子邮件或所有数据？请尝试“$”（复选框）。prop（'disabled'，！checkbox.checked）`而不是使用

id

禁用

enable\u disable\u input

函数中的元素。