Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Checkbox

Standard Checkbox Disabled Disabled & Checked on Load

Output: ____ // Event Type: ____

HTML

<input type="checkbox" data-fd-control="checkbox"
    data-fd-callback="checkboxCallback"
    data-fd-parentid="1" />

JavaScript

FD.Page.checkboxCallback = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value 
        ? "Checked!" 
        : "Unchecked :(");
    this.element.closest('.row').find('.output-event').text(event.type);
};

Switch / Toggle

Toggle

Output: ____ // Event Type: ____

HTML

<input type="checkbox" data-fd-control="toggle" 
    data-fd-callback="setToggleText" />

JavaScript

FD.Page.setToggleText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value 
        ? "Checked!" 
        : "Unchecked :(");
    this.element.closest('.row').find('.output-event').text(event.type);
};

Switch (Checked on Load, DisabledEnabled)

Output: ____ // Event Type: ____

HTML

<input type="checkbox" data-fd-control="toggle" 
    data-fd-callback="setToggleText" 
    data-fd-disabled="true" 
    checked />

JavaScript

FD.Page.setToggleText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value 
        ? "Checked!" 
        : "Unchecked :(");
    this.element.closest('.row').find('.output-event').text(event.type);
};