Disabled Dropdown

by Claire0101

HTML

<input id="MyCheckbox" type="checkbox" />
<input id="MyInput" value="ABC" />
<select id="MySelect">
  <option>Cat</option>
  <option>Dog</option>
  <option>Mouse</option>
</select>

CSS

.my-read-only-class {
  cursor: not-allowed;
}

JavaScript

$("#MyCheckbox").change(function() {

   var isReadOnly = $("#MyCheckbox").prop("checked");
   var domElements = $("#MyInput, #MySelect");

   $(domElements).prop("readonly", isReadOnly);
   $(domElements).toggleClass("my-read-only-class", isReadOnly);
   $(domElements).find("option").prop("hidden", isReadOnly);

 }).trigger("change");