JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<form>
  <fieldset>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" />
    <br />
    <br />
    <label for="readonlyEnabled">Read Only?</label>
    <input type="checkbox" id="readonlyEnabled" name="readonlyEnabled" />
    <br />
    <input type="button" name="Submit" value="Submit" />
  </fieldset>
</form>

JavaScript

$(function() {

  $(document).on('click', '#readonlyEnabled', function(e) {
    console.log(e);
    let info = {
      Checked1: $(this).attr(':checked'),
      Checked2: $(this).attr('checked'),
      Checked3: $(this).prop('checked'),
      Checked4: $(this).prop('isChecked')
    };
    console.log(info);
    console.log($(this));
    if ($(this).prop('checked')) {
      console.log('setting readonly');
      $('input[type="text"]').attr('readonly', true);
    } else {
      console.log('clearing readonly');
      $('input[type="text"]').attr('readonly', false);
    }
  });

});