个人中心
gpt4 book ai didi

javascript - 如何使用 jQuery 禁用/启用 jQueryUI 日期选择器？

转载 作者：行者123 更新时间：2023-12-03 03:57:36 26 4
gpt4 key购买 nike

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

enter image description here 

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


    }  }

最佳答案

您可以从 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>

关于javascript - 如何使用 jQuery 禁用/启用 jQueryUI 日期选择器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44867851/

26 4 0
文章推荐： javascript - 如何在父子组件之间传递数据
文章推荐： wpf - 如何在WPF中绑定(bind)逆 bool 属性？
文章推荐： haskell - 为什么我们需要单子(monad)？
文章推荐： javascript - Heroku 上的 Sails 部署
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com