disabling and unchecking the dynamically created checkbox ID

Question

I have the following code on my web page:

<div class="form-group row" id="reassignChecks">
          @{
        var chkCount = 0;
        @for (var i = 1; i <= 10; i++)
        {
            var p = "chkLoc" + chkCount++;
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="@i" id="@{@p}" /> @i

              

        }
        }

when number 1 check box is checked, I want to disable and uncheck all other boxes, checkbox 2,3,4,5,67,8. below is the screen shot:

if number 1 check box is checked then I want to disable and uncheck all other checkboxes.

this is the rendered HTML of the above check box code:

  <div class="form-group row" id="reassignChecks">
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="1" id="chkLoc0" /> 1                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="2" id="chkLoc1" /> 2                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="3" id="chkLoc2" /> 3                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="4" id="chkLoc3" /> 4                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="5" id="chkLoc4" /> 5                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="6" id="chkLoc5" /> 6                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="7" id="chkLoc6" /> 7                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="8" id="chkLoc7" /> 8                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="9" id="chkLoc8" /> 9                
            <input onclick="AnyLocation()" name="AreChecked" type="checkbox" value="10" id="chkLoc9" /> 10    
            </div>

This the code, I wrote to uncheck and disable the 2 to 10 checkboxes. I was wondering if there is a better way to do that in Jquery or Javascript because above is just test code, but in reality, I have 50 checkboxes on my web page:

<script>
        function AnyLocation() {

            var chkLocations = document.getElementById("chkLoc0").checked;
            if (chkLocations == true) {
                document.getElementById("chkLoc1").disabled = true;
                document.getElementById("chkLoc2").disabled = true;
                document.getElementById("chkLoc3").disabled = true;
                document.getElementById("chkLoc4").disabled = true;
                document.getElementById("chkLoc5").disabled = true;
                document.getElementById("chkLoc6").disabled = true;
                document.getElementById("chkLoc7").disabled = true;
                document.getElementById("chkLoc8").disabled = true;
                document.getElementById("chkLoc9").disabled = true;
                document.getElementById("chkLoc10").disabled = true;

            document.getElementById("chkLoc1").checked = false;
            document.getElementById("chkLoc2").disabled = false;
            document.getElementById("chkLoc3").disabled = false;
            document.getElementById("chkLoc4").disabled = false;
            document.getElementById("chkLoc5").disabled = false;
            document.getElementById("chkLoc6").disabled = false;
            document.getElementById("chkLoc7").disabled = false;
            document.getElementById("chkLoc8").disabled = false;
            document.getElementById("chkLoc9").disabled = false;
            document.getElementById("chkLoc10").disabled = false;
            }
            else {
                document.getElementById("chkLoc1").disabled = false;
                document.getElementById("chkLoc2").disabled = false;
                document.getElementById("chkLoc3").disabled = false;
                document.getElementById("chkLoc4").disabled = false;
                document.getElementById("chkLoc5").disabled = false;
                document.getElementById("chkLoc6").disabled = false;
                document.getElementById("chkLoc7").disabled = false;
                 document.getElementById("chkLoc8").disabled = false;
                document.getElementById("chkLoc9").disabled = false;
                document.getElementById("chkLoc10").disabled = false;
            }

        }
  
     </script>

Does this answer your question? [Only one checkbox checked at a time in javascript](https://stackoverflow.com/questions/37002599/only-one-checkbox-checked-at-a-time-in-javascript) — Someone Special, Apr 02 '23 at 02:52

score 1 · Accepted Answer · answered Apr 02 '23 at 02:56

You can select all elements with ids starting with chkLoc that are not the first checkbox to disable.

const otherCheckboxes = $('[id^=chkLoc]:not(#chkLoc0)');
if ($('#chkLoc0').is(':checked'))
    otherCheckboxes.prop('disabled', true).prop('checked', false);
else 
    otherCheckboxes.prop('disabled', false);

disabling and unchecking the dynamically created checkbox ID

1 Answers1