javascript - Javascript/jQuery 可以自动填充只读文本字段吗？

Question

我的应用程序中有一个区域需要用户同意一个声明，我使用的是 Javascript/jQuery，这样当用户选择"is"时，它会自动将日期/时间输入到只读字段中。

虽然我无法复制它，但我有多个用户告诉我，当他们选择"is"时，它不会填充日期/时间，并且由于该字段是只读的，他们不能自己输入。

我的代码中是否有任何非常规的内容会导致特定浏览器出现上述问题？任何人都可以在他们的机器上重现这个吗？

这是一个工作示例:http://jsfiddle.net/YL2Wd/

HTML:

<div>
    <label>I agree:*</label>
    <span class="options">
        <label for="agreement_no">No</label>
        <input type="radio" class="required authorization" value="0" id="agreement_no" name="agreement">

        <label for="agreement_yes">Yes</label>
        <input type="radio" class="required authorization" value="1" id="agreement_yes" name="agreement">
    </span>
</div>
<div class="description">
    Agreement Text
</div>
<div class="question">
    <label for="authorization_timestamp">Date/Time*</label>
    <input type="text" readonly="readonly" maxlength="100" class="authorization_timestamp required" name="authorization_timestamp" id="authorization_timestamp">
</div>

Javascript:

$('.authorization[id$="yes"]').on('change', function() {

    var dateStr;

    if ($(this).val() == 1) {

        var now = new Date();

        var month = now.getMonth() + 1;
        var day = now.getDate();
        var year = now.getFullYear();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        dateStr = month + "/" + day + "/" + year + " " + h + ":" + m + ":" + s
    }

    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});

$('.authorization[id$="no"]').on('change', function() {

    var dateStr;
    dateStr = "";
    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});

Answer 1

代替

 $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

就用

 $("#authorization_timestamp").val(dateStr);

这意味着您应该使用 id 或 class 来指向该元素。

DEMO

---

Try to avoid .next().next()... chaining. because it's brittle and will cause break of html. Alway try to use id or class to point the element. Some browser cause issue with that and create empty text node around there.

---

如果您根本不想更改您的代码(不好，您应该)，那么

    $(this)
        .parent()   // go to span
        .parent()  // jump to parent div
        .next()   // .description div
        .next('.question') // .question div
        .find('.authorization_timestamp')  // find the input
        .val(dateStr); // set value

对您的查询进行一些修改:

  $(this)
        .parent()
        .parent()
        .nextAll('.question')
        .find(".authorization_timestamp")
        .val(dateStr);

根据您的评论:

像这样尝试:

var index = this.id                          // get id of radio
                  .replace('agreement','')   // replace agreement string
                  .replace('_yes','');       // replace yes string
                                             // output: 1, 2, 3 ...

$("input#authorization" + index + '_timestamp')   // get the target input field 
                                                  // using that index, because your
                                                  // html is synchronous with index
                                    .val(dateStr);

DEMO

我为 yes 做，同样为 no 做。