输入从只读更改后，JQuery 日期选择器不起作用答案

【问题标题】：JQuery datepicker doesn't work after input changed from readonly输入从只读更改后，JQuery 日期选择器不起作用
【发布时间】：2014-05-19 12:08:07
【问题描述】：

我正在将此 datepicker 与 MVC3 应用程序一起使用。

我希望输入字段为readonly，直到单击编辑按钮。当该字段成为焦点时，我想调用日期选择器。

如果页面加载时输入可编辑，则以下代码可以正常工作。但是，当我添加只读属性时，一旦单击编辑按钮并且该字段不再是只读的，日期选择器就不会出现。是什么阻止了日期选择器被调用？

$("[id$='Date']:not([readonly])").datepicker({ format: "dd MM yyyy" })
        .focus(function () {
            $(this).on('changeDate', function () {
                $(this).datepicker('hide');
            })
        });

将字段从只读更改为可编辑的代码如下：

//enable editing and change button to "Update"
$("[id$='-edit']").click(function (e) {
    var myButton = e.target.id;
    //get text based on browser
    var txt = e.target.textContent || e.target.innerText;
    if (txt == 'Edit') {
        e.preventDefault();
        var myText = myButton.slice(0, (myButton.indexOf('-')));
        $('#' + myText).prop('readonly', false);
        e.target.textContent = 'Update';
        //added below for browser compatibility
        e.target.innerText = 'Update';
    }
    else {
        window.onbeforeunload = null;
    }
});

由 MVC 生成的 Razor 和 HTML：

可编辑：

@Html.TextBoxFor(m => m.reviewDate)

<input data-val="true" data-val-required="The Review Date field is required." id="reviewDate" name="reviewDate" type="text" value="12 December 2013" class="valid">

只读：

@Html.TextBoxFor(m => m.reviewDate, new { @readonly = "readonly" })

<input data-val="true" data-val-required="The Review Date field is required." id="reviewDate" name="reviewDate" readonly="readonly" type="text" value="12 December 2013" class="valid">

上面的readonly属性通过编辑按钮代码去掉后的readonly：

<input data-val="true" data-val-required="The Review Date field is required." id="reviewDate" name="reviewDate" type="text" value="12 December 2013" class="valid">

解决方案

根据已接受的答案，我已更改编辑按钮代码以在删除只读属性时分配日期选择器。

这一行...

$('#' + myText).prop('readonly', false);

...现在是这样的：

$('#' + myText).prop('readonly', false).datepicker({ format: "dd MM yyyy" });

【问题讨论】：

标签： javascript jquery asp.net-mvc datepicker

【解决方案1】：

这个

$("[id$='Date']:not([readonly])").datepicker(...

不会将日期选择器分配给只读元素。如果您更改元素以删除只读属性，那么您还必须在此时分配日期选择器。

【讨论】：