Disable dynamically created checkbox when checked

Question

I have the following code which produces a list of checkboxes. This list could contain any amount of checkboxes and will vary per record:

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

I also have this code to disable a checkbox, when it has been checked. The problem is that it will only disable the first checkbox, I need to disable any in the list:

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

Thanks

Thanks to Rory & Tokunbo, both these solutions do exactly what I ask, however having implemented them, I realise that it's not going to work for me as a disabled checkbox doesn't post when I hit save.

I am now thinking that the best way to handle this it to make any checked checkboxes disabled on page load, as when I hit save, the page will reload. Again I am having problems though, this code achieves the disabled part, however the issue is that it's automatically setting all checkboxes to checked:

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

Rory McCrossan · Accepted Answer · 2018-12-19 10:15:39Z

1

The issue is because id attributes must be unique within the DOM. To fix your problem, change that id to a class. Then you can use the this keyword within the event handler to only amend the state of the checkbox which raised the event. Try this:

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

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

One thing to note is that if the user accidentally checks a box you are not providing them any way to undo their action; the box will be disabled and therefore readonly.

edited Dec 19, 2018 at 10:15

answered Dec 19, 2018 at 10:06

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rory McCrossan Over a year ago

It's hard to suggest alternatives as you've not told us what you want to achieve. You're correct in that disabled elements will not be included in any form submissions, though.

JohnNewbie Over a year ago

I am thinking instead of disable on click, disable any checked checkboxes on page load. Thanks

Rory McCrossan Over a year ago

$(':checkbox:checked').prop('disabled', true)

JohnNewbie Over a year ago

Perfect! Thanks a lot

Ojo Tokunbo · Accepted Answer · 2018-12-19 10:12:29Z

1

You are using an id selector which should be unique to an element $(document).on('click', '#checked', function (){ ...}, try using a class selector instead, your code should now look something like

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

don't forget to also use classes instead of id in your html.

answered Dec 19, 2018 at 10:12

Ojo Tokunbo

561 silver badge5 bronze badges

Collectives™ on Stack Overflow

Disable dynamically created checkbox when checked

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related