使用checbox禁用JQuery UI微调器_Jquery_Jquery Ui_Jquery Ui Spinner

使用checbox禁用JQuery UI微调器

jquery jquery-ui

使用checbox禁用JQuery UI微调器,jquery,jquery-ui,jquery-ui-spinner,Jquery,Jquery Ui,Jquery Ui Spinner,我正在使用：如何设置它，以便在输入已禁用attr=时禁用微调器 <input type="checkbox" /> <input type="text" class="spinner" /> if($checkbox.attr("checked")){ $input.removeAttr('disabled').spinner(); } else { $input.attr('disabled', true).spinner("option", "disab

我正在使用：如何设置它，以便在输入已禁用attr=时禁用微调器

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


if（$checkbox.attr（“checked”））{
$input.removeAttr（'disabled'）.spinner（）；
}否则{
$input.attr（'disabled'，true）.spinner（“选项”，“disabled”，true）；
}

这段代码给了我一个错误：无法在初始化之前调用微调器上的方法；试图调用方法“option”

未创建微调器小部件时，您正在尝试设置其选项。相反，您可以使用构造函数选项

disable

调用微调器：

if($checkbox.attr("checked")){
   $input.removeAttr('disabled').spinner();
} else {
   $input.attr('disabled', true).spinner({
      disabled: true
    });
}

试试这个：

默认情况下，jQueryUI微调器具有/方法，最好利用这些方法。此外，如果要将微调器默认为禁用，只需将其输入设置为

disabled=“disabled”

，然后将

this.disabled

馈送到微调器构造函数。如果使用此方法，每次将

this.disabled

馈送给微调器构造函数都是安全的，因为

this.disabled

true

disabled=“disabled”

和

this.disabled

如果

disabled

属性不存在



默认启用的微调器


默认禁用的微调器

$（“.spinner”）.each（函数（）{
$（此）.spinner({
disabled：这个是disabled
});
});
功能启用微调器（微调器ID，启用）{
变量微调器=$（“#”+微调器ID）；
如果（启用）{
微调器。微调器（“启用”）；
}否则{
微调器。微调器（“禁用”）；
}
}

尽管我需要通过

disabled:false（如果选中），但这仍然有效。是否有更好的方法可以做到这一点，而无需每次重新创建插件，比如存储一次spinner插件的缓存。然后在if？Yes中调用enable/disable方法，在DOM准备好并具有正确状态（启用或不启用）时创建微调器元素：$（document.ready（function（）{$input.spinner（{disable:false}）；}）；然后使用选项方式，如在checkbox元素的change回调中调用的问题中所述
$( ".spinner" ).prop('disabled',true);
  $(':checkbox').change(function(){
    if($(':checked').length>0){
      $( ".spinner" ).spinner();
    }else{
      $( ".spinner" ).spinner("destroy").prop('disabled',true);
    }
});

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