jQuery CheckBox
Invoke the check method of the jqxCheckBox. Author: http://jqwidgets.com
by inee814
HTML
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxCheckBox'>Entertainment</div>
<div>
<input style="margin-top: 20px;" type="button" id='btnDisable' value="Disable" />
<input style="margin-top: 20px;" type="button" id='btnEnable' value="Enable" />
<input style="margin-top: 20px;" type="button" id='btnSetItems' value="Set items" />
<input style="margin-top: 20px;" type="button" id='btnGetValue' value="Get value" />
<br/>
<span id="resultText"></span>
</div>
JavaScript
$("#jqxCheckBox").jqxCheckBoxGroup({
theme: 'energyblue',
layout: "horizontal",
labelPosition: "after",
items: ["item1", "item2", "item3"],
// disabled: true, /** 1) error **/
change: function (item) { /** 2) required **/
console.log(item);
},
});
$("input[type=button]").jqxButton({
height: '30px',
width: '120px',
theme: 'energyblue'
});
$('#btnSetItems').on('click', function () {
// $("#jqxCheckBox").jqxCheckBoxGroup("val", ["item2", "item3"]); /** 3) doesn't work **/
console.log($("#jqxCheckBox").jqxCheckBoxGroup("disabled"));
$("#jqxCheckBox").jqxCheckBoxGroup("checkValue", "item2");
$("#jqxCheckBox").jqxCheckBoxGroup("checkValue", "item3");
});
$('#btnGetValue').on('click', function () {
// 2) doesn't work when the 'change' attribute is not set
const checked = $("#jqxCheckBox").jqxCheckBoxGroup("val");
console.log(checked);
let text = "";
if (checked.length > 0) {
checked.forEach(item => text += `${item} `);
}
$("#resultText").text(text);
});
$('#btnDisable').on('click', function () {
$("#jqxCheckBox").jqxCheckBoxGroup("disable");
});
$('#btnEnable').on('click', function () {
$("#jqxCheckBox").jqxCheckBoxGroup("enable");
});