Question

我有以下代码可产生复选框列表。此列表可以包含任意数量的复选框，并且每个记录会有所不同：

@if (Model.PaymentRefundData != null)
{
  for (int i = 0; i < Model.PaymentRefundData.Count(); i++)
  {
    <tr>
      <td>
        @Html.HiddenFor(j => j.PaymentRefundData[i].ContractContributionHistoryId)
        @Html.DisplayFor(j => j.PaymentRefundData[i].CommencementDeductions)
      </td>
      <td>
        @Html.DisplayFor(j => j.PaymentRefundData[i].Category)
      </td>
      <td>
        @Html.DisplayFor(j => j.PaymentRefundData[i].NumberOfContributions)
      </td>
      <td>
        @Html.DisplayFor(j => j.PaymentRefundData[i].EmployeeContributionReference)
      </td>
      <td>
        @Html.DisplayFor(j => j.PaymentRefundData[i].TeamMemberName)
      </td>
      <td>
        @Html.CheckBoxFor(j => j.PaymentRefundData[i].NotInUse, new { id= "checked" })
      </td>
    </tr>
  }
}

当选中该复选框时，我也具有禁用该复选框的代码。问题在于它只会禁用第一个复选框，我需要禁用列表中的任何一个：

$(document).on('click', '#checked', function () {
  if ($("#checked").prop('checked', true)) {  
    $('#checked').attr('disabled', true);
  }
});

谢谢

多亏了Rory＆Tokunbo，这两种解决方案都完全满足了我的要求，但是实施了它们之后，我意识到这对我来说是行不通的，因为当我点击保存时，禁用复选框不会发布。

我现在正在考虑处理此问题的最佳方法，以使其在页面加载时禁用所有选中的复选框，因为当我点击保存时，页面将重新加载。再次，我遇到了问题，该代码实现了禁用部分，但是问题在于它会将所有复选框自动设置为选中状态：

  $(document).ready( function () {
            if ($(".checked").prop('checked', true)) {                
                $('.checked').attr('disabled', true);
            }
        });

Answer 1

问题是因为id属性必须在DOM中必须唯一。要解决您的问题，请将id更改为class。然后，您可以在事件处理程序中使用this关键字，仅修改引发事件的复选框的状态。试试这个：

<td>
  @Html.CheckBoxFor(j => j.PaymentRefundData[i].NotInUse, new { @class = "checked" })
</td>

$(document).on('click', '.checked', function () {
  if (this.checked) this.disabled = true;
});

要注意的一件事是，如果用户不小心选中了一个框，则您没有为他们提供任何撤消其操作的方式；该框将被禁用，因此为只读。

Answer 2

您使用的ID选择器应该对元素$(document).on('click', '#checked', function (){ ...}唯一，请尝试使用类选择器，您的代码现在应类似于

$(document).on('click', '.checked', function () {
        if ($(".checked").prop('checked', true)) {  
            $('.checked').attr('disabled', true);
        }
    });

别忘了在HTML中也使用类而不是id。

选中后禁用动态创建的复选框

2 个答案: