I am using the: http://api.jqueryui.com/spinner how can I set it so that if the input has attr=disabled it will disable the spinner?
<input type="checkbox" />
<input type="text" class="spinner" />
if($checkbox.attr("checked")){
$input.removeAttr('disabled').spinner();
} else {
$input.attr('disabled', true).spinner("option", "disabled", true);
}
This code give me error: cannot call methods on spinner prior to initialization; attempted to call method 'option'
On
You are trying to set an option of your spinner widget when it is not created. Instead, you could call your spinner with the constructor option disable :
if($checkbox.attr("checked")){
$input.removeAttr('disabled').spinner();
} else {
$input.attr('disabled', true).spinner({
disabled: true
});
}
jQuery UI spinner has enable/disable methods by default, best to leverage those. Additionally if you want to default a spinner to disabled just set its input to disabled="disabled" then feed this.disabled to the spinner constructor. It is safe to feed this.disabled to the spinner constructor every time if you use this approach because the this.disabled === true if disabled="disabled" and this.disabled === false if the disabled attribute is not present.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<p>
<label for="spinner1">Default Enabled Spinner</label>
<input class="spinner" id="spinner1"/>
<input checked="checked" onchange="enableSpinner('spinner1', this.checked);" type="checkbox"/>
</p>
<p>
<label for="spinner2">Default Disabled Spinner</label>
<input class="spinner" disabled="disabled" id="spinner2"/>
<input onchange="enableSpinner('spinner2', this.checked);" type="checkbox"/>
</p>
<script type="text/javascript">
$(".spinner").each(function() {
$(this).spinner({
disabled: this.disabled
});
});
function enableSpinner(spinnerId, enable) {
var spinner = $("#" + spinnerId);
if (enable) {
spinner.spinner("enable");
} else {
spinner.spinner("disable");
}
}
</script>
</body>
</html>
Try this: http://jsbin.com/ojiwas/1/edit