jQueryUIを使用してjQueryUIのdatePickerを無効/有効にする方法はありますか？

ラジオボタンが変更されたときに、jQueryUIのdatePickerフィールドを無効にして有効にしたいとします。私はこのコードを使用し、最初の作品とdatepickerを破棄しますが、私はラジオボタンを変更すると、datepickerをもう一度構築しません（最初のラジオボタンをクリックすると、2つの上位日付ピッカーが有効になり、2人が完全に無効にする必要があります。ボタンを押すと、それはあなたがjqueryuiの日付ピッカーのドキュメントからこれを試みることができる jQueryUIを使用して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

）すべてのフィールドを無効にする必要があります。 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

私はそれを試してみましたが、「日付ピッカー」は無効になったとき、私は再びそれを有効にすることはできません –

jQueryUIを使用してjQueryUIのdatePickerを無効/有効にする方法はありますか？

答えて

関連する問題