Question

我尝试根据第一选择将datepicker设置为启用或禁用datepicker。如果用户选择“已应用”选项，我想将readonly属性设置为字段datepicker，并且不允许它为弹出日历。

下面的示例生成两个字段：Application Selection和DatePicker字段：

$(document).ready(function(){
    $('#NextFollowDate').datepicker({
        format:"yyyy-mm-dd"
    });
    $('#ActivityType').on('change',function()
    {
        var actType = $(this).val();
        if (actType=='3')
        {
            $('#NextFollowDate').attr('readonly','readonly');
        }
        else
        {
            $('#NextFollowDate').removeAttr('readonly');
        }
    });
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

<select class="form-control" id="ActivityType" name="ActivityType">
    <option selected="" value="__None">--None--</option>
    <option value="1">1 - First Appoinment</option>
    <option value="2">2 - Second Appoinment</option>
    <option value="3">3 - Applied</option>
</select>
<div class="form-group">
    <label for="NextFollowDate" class="col-sm-2 control-label"><label for="NextFollowDate">Next Date</label></label>
    <div class="col-sm-10">
        <input class="form-control" id="NextFollowDate" name="NextFollowDate" type="text" value="" style="width: 214px;">
    </div>
</div>

来自readonly属性根本不会从弹出窗口中停止DatePicker字段。然而，设置$('#NextFollowDate').attr('disabled','disabled');，它会正常工作。但是，当我提交表格时，这是有问题的;因此，我希望它是readonly并阻止日历弹出。

我有什么方法可以使用readonly属性存档吗？感谢。

如何通过设置readonly属性来切换bootstrap DatePicker？

0 个答案: