如何允许用户一次只添加一个值?

时间:2015-12-31 05:57:16

标签: javascript jquery

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

dad

这是我的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禁用该字段吗?

2 个答案:

答案 0 :(得分:2)

试试这个: 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>

将输入类型更改为number。让浏览器处理number only要求。当然,您可以添加JS以进行进一步的验证。

答案 1 :(得分:0)

编写JQuery

$(".textfield").keypress( function() {
    if($("#frMnth").val().length > 0) {
       $("#frDays").attr("disabled", "disabled");
    }
    else if($("#frDays").val().length > 0) {
       $("#frMnth").attr("disabled", "disabled");
    }
    else {
       $("#frMnth").removeAttr("disabled"); 
       $("#frDays").removeAttr("disabled"); 
    }
});