How to disable all checkboxes when page loads in jquery?

Question

I'm working on this table that has checkboxes for each row. Basically, I want all of the email input fields to be disabled once page loads. If the users clicks on the checkbox that belongs to a row then the email input field for that row should be enabled so the user can type in an email. Finally, if the user clicks on the Select all checkbox all of the input fields should be enabled/disabled. For some reason I can only disabled the first, second and last input field once page loads. My Select All checkbox is not working properly either :(. Can anyone tell me what I'm doing wrong please? Thanks in advance!

          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);

Here's my code - LIVE DEMO:

 $(document).ready(function() { $("#checkAll").change(function() { $(".input_checkbox").prop('checked', $(this).prop("checked")).each(function() { enable_disable_input(this); var nameValue = $(this).attr("name"); var inputFieldNameValue = $.trim(nameValue); var inputFieldString = "customer-name-inputField"; var inputFieldId = inputFieldNameValue + inputFieldString; if ($(this).is(":checked")) { enable_disable_input(this); $("#" + inputFieldId).prop('placeholder', "Enter email address"); } else { $("#" + inputFieldId).prop('placeholder', ""); enable_disable_input(this); } }); }); function enable_disable_input(checkbox) { var input_id = checkbox.id.replace('-checkbox', '-inputField'); $("#" + input_id).prop('disabled', !checkbox.checked); } $(".input_checkbox").change(function() { var nameValue = $(this).attr("name"); var inputFieldNameValue = $.trim(nameValue); var inputFieldString = "customer-name-inputField"; var inputFieldId = inputFieldNameValue + inputFieldString; if ($(this).is(":checked")) { enable_disable_input(this); $("#" + inputFieldId).prop('placeholder', "Enter email address"); } else { $("#" + inputFieldId).prop('placeholder', ""); enable_disable_input(this); } }); $(".input_checkbox").each(function() { enable_disable_input(this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <div style="width:1140px;"> <br/> <table> <div> <tr> <td align="center" valign="bottom">Select All <br/> <input type="checkbox" id="checkAll" value="" /> </td> <td width="5"></td> <td width="200" valign="bottom">Name</td> <td align="center" class="table-col-phone" style="padding-left:20px;">Phone # / Extension</td> <td width="50"></td> <td valign="bottom" style="padding-left: 90px;">Email</td> </tr> <tr> <td style="font-weight: bold;">Group1</td> </tr> <tr> <td></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value=""> </td> <td class="fullName">Ben Morris</td> <td align="left" class="usersPhoneNumber">3033422109</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td align="center"></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value=""> </td> <td class="fullName">Mike Jeff</td> <td align="left" class="usersPhoneNumber">3037777777</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td style="font-weight: bold;">Group2</td> </tr> <tr> <td></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value=""> </td> <td class="fullName">Ana McLwius</td> <td align="left" class="usersPhoneNumber">3039899231</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td align="center"></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value=""> </td> <td class="fullName">Zumia Brown</td> <td align="left" class="usersPhoneNumber">3033213453</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td style="font-weight: bold;">Group3</td> </tr> <tr> <td></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="0customer-name-checkbox" name="0 " value=""> </td> <td class="fullName">Bryan Smith</td> <td align="left" class="usersPhoneNumber">3033222098</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="0" id="0customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td align="center"></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="1customer-name-checkbox" name="1 " value=""> </td> <td class="fullName">Junior White</td> <td align="left" class="usersPhoneNumber">3030098342</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="1" id="1customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> <tr> <td align="center"></td> <td align="center"> <input class="input_checkbox" type="checkbox" id="2customer-name-checkbox" name="2 " value=""> </td> <td class="fullName">Peter McDonald</td> <td align="left" class="usersPhoneNumber">3037777777</td> <td width="50"></td> <td> <input type="email" class="inputEmail" name="2" id="2customer-name-inputField" placeholder="" value="" /> <br/> <br/> </td> </tr> </div> </table> <button id="submitButton" type="button" class="sign-in-button" style="text-align: center;margin-left: 428px;" value="Submit" />Submit</button> </div> 

Answer 1

Obviously because of the duplicated ids.

try this:

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

Answer 2

Your code seems a little messy, something like this would work and it's more readable

$(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);
            })
        });

full working example

Also, you should remove the duplicated ID's.

Answer 3

You should search email input based on the current element. You are having duplicate ids.

try this:

$(this).closest('tr').find('input[type;"text"]').attr("disabled", !this.checkbox);

Updated Fiddle

Note I have taken leisure to update your code. Hope it helps!

Getting Data

You can try something like this:

Note I have updated Group label rows and have added class in it.

Updated Fiddle

$("#submitButton").on("click", function() {
  var result = {};
  var group_id = "";
  $("table tr").each(function(index, row) {
    var $row = $(row)
    group_id = $row.hasClass("section-label") ? $row.find("td:first").text() : group_id;
    if (group_id && $row.find(".input_checkbox").is(':checked') && $row.find('.inputEmail').val().trim() !== "") {
      result[group_id] = result[group_id] || [];
      result[group_id].push({
        firstName: $row.find('.fullName').text(),
        number: $row.find('.usersPhoneNumber').text(),
        email: $row.find('.inputEmail').val()
      });
    }
  });
  console.log(result)
})