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

Question

我的应用程序区域需要用户同意语句，我使用的是Javascript / jQuery，这样当用户选择“是”时，它会自动将日期/时间输入到只读字段中。

虽然我无法重现它，但我有多个用户告诉我，当他们选择“是”时，它不会填充日期/时间，因为该字段是只读的，所以他们不能自己输入。

我的代码中是否有任何非传统的内容会导致特定浏览器中出现上述问题？谁能在他们的机器上重现这个？

以下是一个工作示例：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

---

  

尽量避免使用.next（）。next（）...链接。因为它很脆弱，会导致html中断。总是尝试使用id或class来指向元素。某些浏览器会导致问题，并在那里创建空文本节点。

---

如果你根本不想改变你的代码（不好，你应该），那么

    $(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执行此操作。

Answer 2

我修改了您的JSFiddle以演示一种简单的方法。基本上，当您动态创建单选按钮输入时，添加一个属性data-timestamp，指向动态生成的关联时间戳文本框的ID，如下所示：

<input type="radio" class="required authorization" value="0" id="agreement1_no" data-timestamp="authorization1_timestamp" name="agreement1">
<input type="radio" class="required authorization" value="1" id="agreement1_yes" data-timestamp="authorization1_timestamp" name="agreement1">

然后，在你的jQuery函数中，获取该属性的值并将其用作jQuery选择器来设置文本框的值。

var targetElement = "#" + $(this).attr("data-timestamp");
$(targetElement).val(dateStr);

Answer 3

thecodeparadox已经向您展示了该做什么$("#authorization_timestamp").val(dateStr);。它可能在某些浏览器中不起作用的原因可能是因为围绕HTML元素创建了空文本节点。

如果更改HTML不包含任何空格，则选择器应该有效。话虽如此，使用像

这样的代码

$(this).parent().parent().nextAll()

通过对HTML进行任何细微更改，确保破解代码。

不使用ID 使其正常工作 如果可能有多个authorization_timestamp s，则无法分配ID。使它成为一个类并使用类似下面的内容

<!-- Add a div with a class around all your HTML so you can properly 
     walk up and back down to the search field to your form wrapper -->
<div class="form-wrapper">old content</div>...

现在找到您的元素，如下所示

$(this).parents(".form-wrapper").find("authorization_timestamp");

我在这里创建了一个工作示例：http://jsfiddle.net/YL2Wd/11/我还改进了代码，因此它不需要两个单独的处理程序。