jQuery/Bootstrap widget: fileinput

fileinput.html

<script type="text/html" id="file-input-template">
    <div class="input-group">
        <input type="text" readonly="readonly" class="form-control" />
        <label class="input-group-btn">
            <span class="btn btn-primary">
                Browse
                <input type="file" class="sr-only" />
            </span>
        </label>
    </div>
</script>

<script type="text/javascript">
    $.widget("scw.fileinput", {
        options: {
            id: "file",
            name: "file",
            disabled: false
        },

        _create: function () {
            var self = this;
            self.$group = $($("#file-input-template").html()).appendTo(self.element);
            self.$file = self.$group.find("input[type='file']");
            self.$file.attr("id", self.options.id);
            self.$file.attr("name", self.options.name);
            self.$text = self.$group.find("input[type='text']");
            self.$button = self.$group.find(".btn");
            self._setDisabled(self.options.disabled);
            self.$file.change(function () {
                self.$text.val(self.$file.val());
            });
        },

        _setDisabled: function (disabled) {
            var self = this;
            self.$text.prop("disabled", disabled);
            self.$file.prop("disabled", disabled);
            self.$button.toggleClass("disabled", disabled);
        },

        _setOption: function (key, value) {
            var self = this;
            self._super(key, value);
            if (key === "disabled") {
                self._setDisabled(value);
            }
        }
    });
</script>