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

Question

我正在处理每行都有复选框的表格。基本上，我希望在页面加载后禁用所有电子邮件输入字段。如果用户单击属于某一行的复选框，则应启用该行的电子邮件输入字段，以便用户可以输入电子邮件。最后，如果用户点击 Select all 复选框，所有输入字段都应该被启用/禁用。出于某种原因，我只能在页面加载后禁用第一个、第二个和最后一个输入字段。我的 Select All 复选框也无法正常工作 :(。谁能告诉我我做错了什么？提前谢谢！

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

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

$(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

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

试试这个：

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

Updated Fiddle

注意，我有空来更新您的代码。希望对您有所帮助！

获取数据

你可以试试这样的：

请注意，我已更新 Group label 行并在其中添加了类。

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

Answer 2

显然是因为重复的 id。

试试这个：

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

Answer 3

你的代码看起来有点乱，像这样可以工作，而且更易读

$(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

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