使用checbox禁用JQuery UI微調器

我正在使用：http://api.jqueryui.com/spinner如何設置它，以便如果輸入有attr = disabled，它將禁用微調器？使用checbox禁用JQuery UI微調器

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

此代碼給我錯誤：無法在初始化之前調用微調器上的方法;試圖調用方法「選項」

來源

2013-01-11 John Magnolia

試試這個：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); 
    } 
});

來源

2013-01-11 08:45:16 Jai

您正試圖設置您的微調控件widget沒有創建時的選項。相反，你可以打電話給你的微調與構造選項disable：

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

來源

2013-01-11 08:19:46 sdespont

這工作雖然我需要通過'禁用：如果FALSE'檢查。 –

有沒有更好的方式做到這一點，而不需要每次重新創建插件，例如一次存儲微調插件的緩存。然後調用裏面的enable/disable方法if？ –

是的，當DOM準備好正確的狀態（啓用或不啓用）時，創建你的微調元素：$（document）.ready（function（）{$ input.spinner（{disable：false}）;}）;然後使用選項方式，就像在複選框元素的更改回調中調用的問題中一樣 – sdespont

jQuery UI的微調器enable/disable方法在默認情況下，最好能利用這些。此外，如果您要默認微調器禁用，只需將其輸入設置爲disabled="disabled"，然後將this.disabled提供給微調器構造函數。如果您使用此方法，則可以安全地將this.disabled添加到微調構造函數，因爲如果disabled屬性不存在，則this.disabled === true if disabled="disabled"和this.disabled === false是安全的。

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>

來源

2013-07-15 19:53:23 ubiquibacon

使用checbox禁用JQuery UI微調器

回答

相關問題