javascript - 如何允许用户一次只添加一个值？

Question

我需要允许用户一次仅在一个框中输入值。例如:如果用户输入月份，则天数字段不应允许他输入值。如果用户在其中任何一个字段中输入值，我可以禁用其他字段吗？
而且它只需要数字。

这是我的 html

<td class="ctext" width="13%"> Reset Frequency in Months/Days
    </td>
    <td class="ctext" style="display:inline-block">
        <label for="frMnth" style="display:block">Month</label>
        <input type="text" class="textfield" value="" id="frMnth" name="frMnth" onkeypress="return isNumber(event)" />
        <label for="frDays" style="display:block">Days</label>
        <input type="text" class="textfield" value="" id="frDays" name="frDays" onkeypress="return isNumber(event)" />
    </td>

这是仅使用 Onkeypress 键入数字的脚本。

function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
}
return true;}

我可以使用 Onkeypress 禁用该字段吗？

Answer 1

试试这个: http://jsfiddle.net/lotusgodkk/GCu2D/1011/

HTML:

<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
    <label for="frMnth" style="display:block">Month</label>
    <input type="text" class="textfield" value="" id="frMnth" name="frMnth" />
    <label for="frDays" style="display:block">Days</label>
    <input type="text" class="textfield" value="" id="frDays" name="frDays" />
</td>

JS:

$(document).ready(function() {
    $(document).on("blur", ".textfield", function() {
        var ele = $(this);
        if (ele.val()) {

            if (isNaN(ele.val())) {
                alert("Only numbers please");
                return false;
            }
            $(".textfield").not(this).attr("disabled", "disabled");
        } else {
            $(".textfield").removeAttr("disabled");
        }
    });
});

不使用 JS 的替代解决方案

演示: http://jsfiddle.net/lotusgodkk/GCu2D/1012/

HTML:

<td class="ctext" width="13%"> Reset Frequency in Months/Days</td>
<td class="ctext" style="display:inline-block">
    <label for="frMnth" style="display:block">Month/Days</label>
    <input type="number" class="textfield" value="" id="frMnth" name="frMnth" />
    <select>
        <option value="month">Month</option>
        <option value="days">Days</option>
    </select>
</td>

将输入类型更改为数字。让浏览器处理仅数字要求。当然你可以添加JS进行进一步的验证。