如何使用jQuery禁用/启用jQueryUI datepicker？

我想在单选按钮更改时禁用并启用jQueryUI datepicker字段。我使用这个代码，第一次工作并销毁datepicker，但当我改变单选按钮时，它不会再建立datepicker（当点击第一个单选按钮时，两个上部日期选择器应该启用，而两个下来者应该完全禁用。当点击第二个广播按钮，就应该禁用所有领域）如何使用jQuery禁用/启用jQueryUI datepicker？

<tr> 
     <td> 
      <ct:selectOneRadio id="periodType" 
           onclick="submit();changeLableDate()" 
           label="" 
           labelKey="bond.bondPeriod" 
           value="#{bean.criteria.bondPeriod.periodTypeId}" 
           selectItems="#{bean.periodItems}"/> 
     </td> 
     <td colspan="3" style="width:65%"/> 

    </tr> 
<tr> 
     <td style="width:35% !important;"> 
      <ct:date id="fromDate2" value="#{bean.criteria.fromDate2}" 
        labelKey="reportCriteria.fromDate" 
        label="#{messages['reportCriteria.fromDate']}:"/> 
     </td> 
     <td/> 
     <td style="width:35% !important;"> 
      <ct:date id="toDate2" value="#{bean.criteria.toDate2}" 
        labelKey="reportCriteria.toDate" 
        label="#{messages['reportCriteria.toDate']}:" /> 

    </tr> 

    <tr> 
     <td style="width:35% !important;"> 
      <ct:date id="fromDateIssue" value="#{bean.criteria.fromDateBond}" 
        labelKey="reportCriteria.fromDate" 
        label="#{messages['issue.fromDate']}:" 
        /> 
     </td> 
     <td/> 
     <td style="width:35% !important;"> 
      <ct:date id="toDateIssue" value="#{bean.criteria.toDateBond}" 
        labelKey="reportCriteria.toDate" 
        label="#{messages['issue.toDate']}:" /> 

     </td> 
     <td colspan="2" style="width:30%"/> 

    </tr> 

<script type="text/javascript"> 
function changeLableDate() { 
    if (document.forms.reportForm["reportForm:periodType"][0].checked) { 
     $(".fromDateIssue").prop("disabled", true); 
     $(".toDateIssue").prop("disabled", true); 
     $(".toDate2").prop("disabled", false); 
     $(".fromDate2").prop("disabled", false); 
     $("#reportForm\\:fromDateIssue").datepicker("destroy"); 
     $("#reportForm\\:toDateIssue").datepicker("destroy"); 

    } 
    else if (document.forms.reportForm["reportForm:periodType"][1].checked) { 

     $("#reportForm\\:fromDate2").datepicker("destroy"); 
     $("#reportForm\\:toDate2").datepicker("destroy"); 
     $("#reportForm\\:fromDateIssue").datepicker("destroy"); 
     $("#reportForm\\:toDateIssue").datepicker("destroy"); 
     $(".fromDateIssue").prop("disabled", true); 
     $(".toDateIssue").prop("disabled", true); 
     $(".toDate2").prop("disabled", true); 
     $(".fromDate2").prop("disabled", true); 


    } }

来源

2017-07-02 zara-90

你可以从jQueryUI的日期选择文档试试这个。 http://api.jqueryui.com/datepicker/#method-option

$(".selector").datepicker("option", "disabled", true);

看看这个例子的。

$(function() { 
 
    $("#datepicker").datepicker({ 
 
     showOtherMonths: true, 
 
     selectOtherMonths: true 
 
    }); 
 
    
 
    $("#disabled").click(function(){ 
 
     $("#datepicker").datepicker("option", "disabled", true); 
 
    }); 
 

 
    $("#enabled").click(function(){ 
 
     $("#datepicker").datepicker("option", "disabled", false); 
 
    }); 
 
    
 
    });

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
</head> 
 
<body> 
 
    <button id="disabled">disabled</button> 
 
    <button id="enabled">enabled</button> 
 
<p>Date: <input type="text" id="datepicker"></p> 
 

 
    
 
</body> 
 
</html>

来源

2017-07-02 06:12:34

我尝试过，但在“日期选择器”致残，我不能再次启用它 –

如何使用jQuery禁用/启用jQueryUI datepicker？

回答

相关问题