how to make checkbox readonly using H5 script

Legacy Contributor

There is one checkbox on M3 Program. We want to make checkbox readonly.

We are using MT Cloud environment.

We tried below options.

• this.$host.find("#ABCDE").attr("readonly", true);
• var elem = content.GetElement('ABCDE');
  $(elem).attr("readonly",true);

simon-divall

I tried it out and used this code:

var fldname = "#" + field;
var el = document.getElementById(field);
if (el != null) {

// if (el.type != "checkbox" ) {
// Greyes out field
$(fldname).attr("disabled", true);
$(fldname).attr("readonly", true);
// document.getElementById(field).disabled = true;
$(fldname).addClass("disabled");
$(fldname).addClass("is-readonly");
// }

// 220406 Disable if checkbox type
if (el.type == "checkbox" ) {
// *-* Does not work as expected
// $(fldname).removeClass("checkbox").addClass("disable-checkbox");
// This stops checkbox clicking, but checkbox does not look like a checkbox anymore
document.getElementById(field).classList.remove("checkbox");
document.getElementById(field).classList.add("disable-checkbox");

// Works for new H5 UI, changes sizes, a workaround, should use some other method (CSS)
el.style.width = "16px";
el.style.height = "16px";

var ela = document.getElementById(field + "-label");
if (ela != null) {
var fldname_look = field + "-label";
$(fldname_look).attr("disabled", true);
$(fldname_look).attr("readonly", true);
if (this.version >= 2.0 ) {
// Do not change colour when new H5 UI
} else {
ela.style.backgroundColor = "#D7D7D8"
}
}


}