I'm using Fabric UI Checkbox in my Office Add-In and I can't seem to programmatically check the checkbox in my taskpane. Actually, I can check it, but it doesn't show checked in the UI.
I've been able to do it like so w/ radio-buttons and toggles, but can't get checkbox for the life of me.
Radio:
$("#" + YesRadioButtonId).siblings('label').addClass('is-checked');
$("#" + YesRadioButtonId).siblings('label').prop('aria-checked', true);
$("#" + YesRadioButtonId).prop('checked', true);
Toggle:
$("#" + ToggleId).siblings('label').addClass('is-selected');
$("#" + ToggleId).prop('checked', true);
Checkbox HTML:
Note: I can enable via HTML by adding either checked=checked or aria-checked=true but I want my HTML to be all disabled and only enable via JS.
<div class="ms-CheckBox column-selector">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input" id="ChkBox-yes" />
<label role="checkbox"
class="ms-CheckBox-field "
tabindex="0"
name="ChkBox-yes">
<span class="ms-Label">YES</span>
</label>
</div>
Checkbox JS:
Note: I tried adding jQueryui as I saw references online to checkboxradio("refresh"); but I get error cannot call methods on checkboxradio prior to initialization;
TaskPaneApp.CheckBoxElements = $(".column-selector").map(function () {
return new fabric['CheckBox'](this);
});
//$("#" + YesCheckBoxId).prop("checked", true).checkboxradio('refresh');
$("#" + YesCheckBoxId).prop("checked", true)
$("input[type='checkbox']").checkboxradio();
//$("#" + YesCheckBoxId).attr('checked', 'checked');
//$("#" + YesCheckBoxId).$('input[checked=""]').val("checked");
//$("#" + YesCheckBoxId).trigger("click");
//$("#" + YesCheckBoxId).addClass("ui-checkbox-on");
All my other elements I could adjust after initialization.
The checkboxes must be adjust before initialization and if adjusted after init, must be re-init.
Here is my final functions:
//Checkboxes
//Checkboxes set to Y by default must be changed BEFORE INIT
//Changeing Checkboxes require re-init!
//Re-Init also re-init toggles?
//Just don't re-init and mostly, just don't use Checkbox, use Toggle/Radio
Do_CheckCheckBox(YesCheckBoxID)
Init_CheckBoxes(window);
function Init_CheckBoxes(window) {
window.CheckBoxElements = $(".column-selector").map(function () {
return new fabric['CheckBox'](this);
});
}
function Do_CheckCheckBox(DivID, reinitbool, opt_windowreqifreinit) {
$("#" + DivID).prop("checked", true);
$("#" + DivID).siblings('label').prop('aria-checked', true);
if (reinitbool == true && window != undefined) { Init_CheckBoxes(window) };
return true;
}
Note: This also messed w/ my toggles, I may look into the init function to fix, but mostly, I likely won't use checkboxes, I prefer toggle/radio, but I wanted to get all the elements working. I'm also fine just setting defaults, I won't likely need to re-adjust checkboxes after initial init anyway.
Update: ... lol so this also worked, but is less reliable as it can be on/off without checking and in my testing, worked fine to setting to Y before init. But after re-init occasionally I couldn't click checkboxes, I had to re-re-init.
document.getElementById(YesCheckBoxID).click()