How can I set options on a jQuery widget

Question

I am trying to set the options for the almost UNDOCUMENTED checkbox widget from Wijmo. Here's the code for the widget:

(function ($) {
    "use strict";
    var checkboxId = 0;
    $.widget("wijmo.wijcheckbox", {
        _csspre: "wijmo-checkbox",
        _init: function () {
            var self = this,
                ele = self.element,
                o = self.options,
                checkboxElement, label, targetLabel, boxElement, iconElement;
            if (ele.is(":checkbox")) {
                if (!ele.attr("id")) {
                    ele.attr("id", self._csspre + checkboxId);
                    checkboxId += 1;
                }
                if (ele.parent().is("label")) {
                    checkboxElement = ele.parent()
                    .wrap("<div class='" + self._csspre + "-inputwrapper'></div>")
                    .parent()
                    .wrap("<div></div>").parent().addClass(self._csspre + " ui-widget");
                    label = ele.parent();
                    label.attr("for", ele.attr("id"));
                    checkboxElement.find("." + self._csspre + "-inputwrapper")
                    .append(ele);
                    checkboxElement.append(label);
                }
                else {
                    checkboxElement = ele
                    .wrap("<div class='" + self._csspre + "-inputwrapper'></div>")
                    .parent().wrap("<div></div>").parent()
                    .addClass(self._csspre + " ui-widget");
                }
                targetLabel = $("label[for='" + ele.attr("id") + "']");
//              if (targetLabel.length > 0) {
//                  checkboxElement.append(targetLabel);
//                  targetLabel.attr("labelsign", "C1");
//              }
                if (ele.is(":disabled")) {
                    self._setOption("disabled", true);
                }
                boxElement = $("<div class='" + self._csspre +
                "-box ui-widget ui-state-" +
                (o.disabled ? "disabled" : "default") +
                " ui-corner-all'><span class='" +
                self._csspre + "-icon'></span></div>");
                iconElement = boxElement.children("." + self._csspre + "-icon");
                checkboxElement.append(boxElement);
                ele.data("iconElement", iconElement);
                ele.data("boxElement", boxElement);

                boxElement.removeClass(self._csspre + "-relative")
                .attr("role", "checkbox")
                .bind("mouseover", function () {
                    ele.mouseover();
                }).bind("mouseout", function () {
                    ele.mouseout();
                });
                if (targetLabel.length === 0 || targetLabel.html() === "") {
                    boxElement.addClass(self._csspre + "-relative");
                }
                ele.bind("click.checkbox", function (e) {
                    self.refresh(e);
                }).bind("focus.checkbox", function () {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-default").addClass("ui-state-focus");
                }).bind("blur.checkbox", function () {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-focus").not(".ui-state-hover")
                    .addClass("ui-state-default");
                }).bind("keydown.checkbox", function (e) {
                    if (e.keyCode === 32) {
                        if (o.disabled) {
                            return;
                        }
                        self.refresh();
                    }
                });

                boxElement.bind("click.checkbox", function (e) {
                    ele.get(0).checked = !ele.get(0).checked;
                    ele.change();
                    ele.focus();
                    self.refresh(e);
                });

                self.refresh();
                checkboxElement.bind("mouseover.checkbox", function (e) {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-default").addClass("ui-state-hover");

                }).bind("mouseout.checkbox", function (e) {
                    if (o.disabled) {
                        return;
                    }
                    boxElement.removeClass("ui-state-hover").not(".ui-state-focus")
                    .addClass("ui-state-default");
                });
            }
        },

        refresh: function (e) {
            var self = this;
            self.element.data("iconElement")
            .toggleClass("ui-icon ui-icon-check", self.element.get(0).checked);
            self.element.data("boxElement")
            .toggleClass("ui-state-active", self.element.get(0).checked)
            .attr("aria-checked", self.element.get(0).checked);
            if (e) {
                e.stopPropagation();
            }
        },

        destroy: function () {
            var self = this, boxelement = self.element.parent().parent();
            boxelement.children("div." + self._csspre + "-box").remove();
            self.element.unwrap();
            self.element.unwrap();
            $.Widget.prototype.destroy.apply(self);
        }
    });
} (jQuery));

Can someone help me by telling me how to set options on a widget created by the widget factory. I can find nothing out there that gives me advice.

Update:

I posted the complete code. The commented area are my comments.

Answer 1

Looking at the source code of the plugin (widget), it appears that you only have one configurable option parameter. It's called disabled and you could use it like this...

$(document).ready(function () {
    $(":input[type='checkbox']").wijcheckbox({
        disabled: true
    });
});

It's probably not mentioned in the documentation because the plugin sets it to "true" automatically if the element's disabled property is already set elsewhere.

if (ele.is(":disabled")) {
    self._setOption("disabled", true);
}

---

EDIT based on OP's comments on original posting:

"...I checked the code and I see o = self.options, checkboxElement, label, targetLabel, boxElement, iconElement; If I knew how to set these I'd be okay...."

The list of items after the comma are not any part of o, self.options, or any user configurable options or parameters. They are just additional variable declarations internal to the plugin.

In other words, this...

var self = this,
    ele = self.element,
    o = self.options,
    checkboxElement, label, targetLabel, boxElement, iconElement;

is simply shorthand (and more efficient code) for this...

var self = this;
var ele = self.element;
var o = self.options;
var checkboxElement;
var label;
var targetLabel;
var boxElement;
var iconElement;

o is the variable that represents the options or parameters for the plugin.