輸入更改為只讀后，jQuery日期選擇器不起作用

Question

我將此日期選擇器與MVC3應用程序一起使用。

我希望輸入字段為readonly直到單擊編輯按鈕。 當該領域成為焦點時，我要呼叫日期選擇器。

如果頁面加載了可編輯的輸入，則以下代碼可以正常工作。 但是，當我添加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">

解

根據接受的答案，我已更改了編輯按鈕代碼，以在刪除readonly屬性時分配日期選擇器。

這條線...

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

...現在是這個：

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

Answer 1

這個

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

不會將datepicker分配給只讀元素。 如果更改元素以刪除readonly屬性，則還必須在該點分配日期選擇器。