JQuery UI spinner disable with checbox

Question

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'

ubiquibacon · Answer 1 · 2013-07-15T20:01:49.023

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.

http://jsfiddle.net/A3SL4/

<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>

score 2 · Answer 2 · answered Jan 11 '13 at 08:19

2

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
    });
}

answered Jan 11 '13 at 08:19

sdespont

13,915
9
56
97

This works although I need to pass `disabled: false` if checked. – John Magnolia Jan 11 '13 at 08:21
Is there a better way of doing this without re-creating the plugin each time, like storing a cache of the spinner plugin once. Then called enable/disable methods inside of the if? – John Magnolia Jan 11 '13 at 08:22
Yes, create your spinner element when DOM is ready with the correct state (enable or not): $(document).ready(function(){$input.spinner({disable:false});}); Then use the option way like in your question called in the change callback of your checkbox element – sdespont Jan 11 '13 at 08:24

score 2 · Accepted Answer · answered Jan 11 '13 at 08:45

Try this: http://jsbin.com/ojiwas/1/edit

$( ".spinner" ).prop('disabled',true);
  $(':checkbox').change(function(){
    if($(':checked').length>0){
      $( ".spinner" ).spinner();
    }else{
      $( ".spinner" ).spinner("destroy").prop('disabled',true);
    }
});

JQuery UI spinner disable with checbox

3 Answers3