如何使用 jQuery 禁用/启用 jQueryUI 日期选择器？答案

【问题标题】：How can disable/enable jQueryUI datepicker using jQuery?如何使用 jQuery 禁用/启用 jQueryUI 日期选择器？
【发布时间】：2017-12-05 16:14:08
【问题描述】：

我想在单选按钮更改时禁用和启用 jQueryUI 日期选择器字段。我使用此代码，第一次工作并销毁日期选择器，但是当我更改单选按钮时，它不会再次构建日期选择器。（当单击第一个单选按钮时，两个上方的日期选择器应该启用，两个下方的日期选择器应该完全禁用。当单击第二个单选按钮，它应该禁用所有字段）

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


    }  }

【问题讨论】：

标签： javascript jquery datepicker jsf-1.2

【解决方案1】：

您可以从 jqueryui datepicker 文档中尝试此操作。 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>

【讨论】：

我试过了，但是当“datepicker”被禁用时，我无法再次启用它