making a checkbox readonly on a condition in javascript

Question

I have the following code on my page. When # 1 check box is checked, I want the #3 checkbox to be readonly. If #1 check box is not checked then, I want the #3 check box to be enabled or not to be readonly.

<div class="form-group row">
   <div class="col">
     1. 
     <input id="Notengaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
        onclick='handleClick(this);' 
     /> 
     I am not employed
   </div>
</div>
<div class="form-group row">
  <div class="col">
    3. 
    <input id="engaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
    /> 
    I am  employed
  </div>
</div>

In order to accomplish this, I wrote the following code, but this does not seem to work. the #3 checkbox is always enabled no matter if I click #1 checkbox or not.

function handleClick(cb)
  {
  if (cb.checked == true)
    {
    document.getElementById('engaged').readOnly = true;
    }
  alert("Clicked, new value = " + cb.checked);
  }

**Anyways** Checkboxes can't be `readonly` see : https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly — Mister Jojo, Mar 01 '23 at 01:02

Jordy · Accepted Answer · 2023-03-01T04:17:05.023

As stated at this, readonly doesn't work on checkboxes. Instead do readonly on the checkbox, it should be just do disabled

function handleClick(cb) {
  document.getElementById('engaged').disabled = cb.checked;
}

<div class="form-group row">
   <div class="col">
     1. 
     <input id="Notengaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
        onclick='handleClick(this);' 
     /> 
     I am not employed
   </div>
</div>
<div class="form-group row">
  <div class="col">
    3. 
    <input id="engaged" 
        asp-for="@Model.Sec3EmployedOutside" 
        type="checkbox" 
    /> 
    I am  employed
  </div>
</div>

testin if a true element is true is ridiculous, use `document.getElementById('engaged').disabled = cb.checked` — Mister Jojo, Mar 01 '23 at 04:14

making a checkbox readonly on a condition in javascript

1 Answers1