JavaScript CheckBox

Set the disabled property of the jqxCheckBox. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxCheckBox1' class="jqxCheckBox">Entertainment</div>
<div id='jqxCheckBox2' class="jqxCheckBox">Computers</div>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="lock">Click</button>

JavaScript

$("#jqxCheckBox1").jqxCheckBox({
    width: '300px',
    disabled: true,
    height: 25,
    theme: 'energyblue'
});

$("#jqxCheckBox2").jqxCheckBox({
    width: '300px',
    disabled: true,
    height: 25,
    theme: 'energyblue'
});

$('#enable').jqxButton({ theme: 'energyblue' });
$('#disable').jqxButton({ theme: 'energyblue' });
$('#lock').jqxButton({ theme: 'energyblue' });

$('#enable').click(function () {
	$('#jqxCheckBox1').jqxCheckBox({ disabled: false });
  $('#jqxCheckBox2').jqxCheckBox({ disabled: false });
});

$('#disable').click(function () {
	$('#jqxCheckBox1').jqxCheckBox({ disabled: true });
  $('#jqxCheckBox2').jqxCheckBox({ disabled: true });
});
    
$("#lock").click(function () {
	var cond = $('#jqxCheckBox1').jqxCheckBox('disabled');
	console.log(cond);

	if (cond == false) {
		$(".jqxCheckBox").jqxCheckBox({ disabled: true });
	} else {
		$(".jqxCheckBox").jqxCheckBox({ disabled: false });
	};
});