0

假设我有一个带有选项 x、y 和其他选项的单选按钮组。如果用户不想要 x 或 y，那么他们可以选择其他，这将允许他们在文本字段中输入自己的值。html代码：

<input type="radio" name="choice" id="x" value="x"/><label for="x">x</label><div></div>
<input type="radio" name="choice" id="y" value="y"/><label for="y">y</label><div></div>
<input type="radio" name="choice" id="other" value="other"/><label for="other">other </label><input type="text" id="otherText"/><span id="error"></span><div></div>

他们输入的值将被验证（它只能是一个数字）。我正在使用 jQuery 进行验证。如果用户输入了除数字之外的任何内容，那么用户将看到一条错误消息。jQuery 会改变 span#error 的 innerHtml。这是我的 jQuery 代码：

$(document).ready(function() {
$("input#otherText").attr("disabled", "disabled");

$("input:radio").click(function() {
    var choice = $(this).val();
    if(choice != "other") {
        $("input#otherText").attr("disabled", "disabled");
        console.log("Choice " + choice);
    }else {
        $("input#otherText").removeAttr("disabled");
    }
});

$("input#otherText").blur(function() {
    console.log("is Other Checked: " + $("input#other").is(":checked"));

    // If some other radio button is chosen, then I don't want to validate.
    if($("input#other").is(":checked")) {
        $("span#error").html("");
        var otherValue = $.trim(jQuery(this).val());
        if(otherValue != ' ' && otherValue.length > 0) {
            if(!otherValue.match(/^[0-9]+$/)) {
                $("span#error").html(otherValue + " is not a number.");
                $("span#error").css({"font-weight":"bold", "color":"red"});
            }
        }            
    }
});            
});

验证按预期工作，但我的问题是决定何时验证。当用户在文本字段中输入一个值并单击或跳出时，上面的代码会进行验证。这意味着即使选择了其他一些无线电（例如 x 或 y），也会进行验证。所以我将 .is(":checked") 添加到 other 中，尽管选择了另一个收音机，但它返回 true。为什么即使未单击“其他”评估为真？有人可以对此有所了解吗？

这是我在小提琴中的代码：http: //jsfiddle.net/9Zycy/

谢谢你。

4

2 回答 2

0 
var choice = $(this).val();

您代码中的这一行将始终将“未定义”返回给选择变量。将 value 属性添加到单选输入元素。

<input type="radio" name="choice" id="x" value="x"/><label for="x">x</label><div></div>
<input type="radio" name="choice" id="y" value="y"/><label for="y">y</label><div></div>
<input type="radio" name="choice" id="other" value="other"/><label for="other">other </label><input type="text" id="otherText"/><div></div>

您的 jquery 代码对我来说看起来不错。虽然没有过多考虑。但以上肯定需要修复。您不妨使用：

var choice = $(this).attr('id');
于 2013-05-31T04:59:58.303 回答
0

如果您想在other选中带有 id 的无线电时避免验证，请执行

if($("input:radio").not("input[id='other']").is(":checked")) {
  //your validation here
于 2013-05-31T04:51:44.937 回答