Question

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

我希望输入字段为readonly，直到单击编辑按钮。当该字段处于焦点时，我想调用datepicker。

如果页面加载输入可编辑，则以下代码可以正常工作。但是，当我添加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属性，则必须在此时分配datepicker。

输入从readonly更改后，JQuery datepicker不起作用

解决方案

1 个答案: