blocking selection of checkboxes if condition is met - Javascript

How do I prevent the user from selecting any boxes of a certain set of checkboxes if a condition is met? For example, I have a dayOfMonth and dayOfWeek checkboxes. If any dayOfMonth checkbox is selected, the user shouldn't be able to select anything in dayOfWeek. However, if any dayOfWeek box is selected, then the user should not be able to select any of the boxes in dayOfMonth.

Here is the view I am using with the Javascript at the bottom.

    <style>
    .error {
        color: red;
    }
</style>

<h1>Task Scheduler</h1>

<h4>Fill in the fields below to set a time for your task</h4>

<br />
<br />
<br />

@using (Html.BeginForm("ScheduleInfo", "Scheduler", FormMethod.Post))
{
    Html.EnableClientValidation();
    <center>
        <div style="text-align: center">
            <div class="form-group">
                @Html.DropDownListFor(m => m.Job, Model.Jobs)
            </div>
        </div>
    </center>

    <center>
        <div class="form-group" style="display:inline-block; position:center">
            <div class="row">
                @Html.LabelFor(model => model.Second, "Second")
                @Html.TextBoxFor(model => model.Second)
                @Html.ValidationMessageFor(model => model.Second, "", new { @class = "error" })

                @Html.LabelFor(model => model.Minute, "Minute")
                @Html.TextBoxFor(model => model.Minute)
                @Html.ValidationMessageFor(model => model.Minute, "", new { @class = "error" })

                @Html.LabelFor(model => model.Hour, "Hour")
                @Html.TextBoxFor(model => model.Hour)
                @Html.ValidationMessageFor(model => model.Hour, "", new { @class = "error" })
            </div>
        </div>
    </center>
    <br />
    <br />

    <center>
        <div class="col-2">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the day(s) of the month the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.DofMID)
                @Html.DisplayFor(m => m.DofMNo)
                @for (int i = 0; i < Model.DofMInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline checkboxDofM" id= "checkboxDofM">
                            @Html.HiddenFor(m => m.DofMInfo[i].DofMID)
                            @Html.CheckBoxFor(m => m.DofMInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DofMInfo[i].IsChecked, Model.DofMInfo[i].DofMNo)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>

    <center>
        <div class="col-2">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the month(s) the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.monthID)
                @Html.DisplayFor(m => m.monthName)
                @for (int i = 0; i < Model.MonthInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline" id="checkboxMonth">
                            @Html.HiddenFor(m => m.MonthInfo[i].monthID)
                            @Html.CheckBoxFor(m => m.MonthInfo[i].IsChecked)
                            @Html.LabelFor(m => m.MonthInfo[i].IsChecked, Model.MonthInfo[i].monthName)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>

    <center>
        <div class="col-3">
            <ul class="list-group">
                <li class="list-group-item-heading list-group-item active">
                    <h4 class="list-group-item-text">Select the day(s) the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.dayID)
                @Html.DisplayFor(m => m.dayName)
                @for (int i = 0; i < Model.DayInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline checkboxDay" id="checkboxDay">
                            @Html.HiddenFor(m => m.DayInfo[i].dayID)
                            @Html.CheckBoxFor(m => m.DayInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DayInfo[i].IsChecked, Model.DayInfo[i].dayName)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>


<script>

    const checkboxDofMElements = document.querySelectorAll('.checkboxDofM');
    const checkboxDayElements = document.querySelectorAll('.checkboxDay');



    checkboxDofMElements.forEach(el => el.addEventListener('change', event => {


        if (event.target.checked) {

        }
            }));


</script>

    <input type="submit" value="Submit Data" id="btnSubmit" />

}