试试这个fiddle

Question

我正在使用JSP，我有一个HTML表单，其中我在顶部有一个按钮，它是Process按钮。现在，如果我点击“处理”按钮，它会显示一个包含两个单选按钮的表单 - TestClient和TestServer。

该表单中还有Submit按钮。

这是我的JSFiddle。

现在我要做的是 - 只要点击TestClient单选按钮，我就需要在按下“提交”按钮之前输入firstName文本框和lastName文本框。这意味着这两个文本框对于TestClient单选按钮是必需的，如果有人在TestClient单选按钮的第三个文本框中键入，则它应该在该文本框旁边显示错误消息。但如果我点击TestServer单选按钮，则所有三个文本框都是强制性的，这意味着我需要在所有三个文本框中输入内容。

可能是，如果不满足某些条件以及文本框旁边的正确消息，我可以使用禁用“提交”按钮功能吗？

我是jQuery的新手，所以还在学习。

Answer 1

我认为在这里做的最好的事情是避免让用户感到困惑，hide()这个不必要的字段就像this一样。选中TestClient按钮后，address字段将被隐藏，但选中TestServer按钮后会显示该字段。这样可以避免混淆哪些方框填写：人们往往不喜欢错误信息，即使他们表达得非常好。

Answer 2

试试这个fiddle

要确定表单是否可提交，您可以使用submittable方法检测所需输入是否具有值：

// update submit button
function submittable() {
    // get all required fields (needs to happen each time)
    var $required = $('input[required=required]', '#form_process'),
        $submittable = true;

    $required.each(function() {
        if ($(this).val()) {
            // nothing
        } else {
            $submittable = false;
        }
    });
    return $submittable;
}

为了使其正常工作，您需要确保您的普遍要求的输入具有必需的属性，并且您可选的地址输入不是

<input name="fname" id="fname" placeholder="firstName" required="required">
<input name="lname" id="lname" placeholder="lastName" required="required">
<input name="address" id="address" placeholder="address">

然后validate方法将使用submittable方法验证表单并禁用/启用按钮

var $submit = $('#submit');

// validate control
function validate() {
    if (submittable()) {
        // you are valid
        //alert('valid');
        $submit.attr('disabled',false);
    } else {
        // you are not valid
        //alert('invalid');
        $submit.attr('disabled',true);
    }
}

然后您最初运行validate方法

// run initial validation
validate();

然后在所有表单输入的密钥上运行它

// run validation on input keyup
$('#form_process input').keyup(function() {
    validate();
});

您还需要一种方法来获取当前已检查的无线电，以显示/隐藏额外的输入。您还需要在需要时输入address输入，以便将其包含在validate方法中：

var $address = $('#address'),
    $server = $('#server');

function getChecked() {
    // find currently checked input
    var $checked = $('input[name=client]:checked', '#form_process');
    // if it is server
    if ($checked.attr('id') === 'server') {
        //alert('server!');
        $address.show();
        $address.attr('required',true);
    } else {
        //alert('client!');
        $address.hide();
        $address.attr('required',false);
    }
}

为了使其正常工作，您应将其中一个无线电设置为已选中

<input type="radio" name="client" id="client" value="TestClient" checked="checked">TestClient 
<input type="radio" name="client" id="server" value="TestServer">TestServer

然后你最初调用getChecked方法然后每当无线电值改变时（以及validate方法）：

// call initial get checked
getChecked();

// for each radio
$('input[type=radio]').each(function() {
    // when it changes
    $(this).change(function() {
        // get checked radio
        getChecked();
        // run validation
        validate();
    });
});

修改

我应该注意到这个解决方案对这个问题非常具体。如果你有超过2个具有不同输入组合的无线电，getChecked()功能可能需要更复杂一些。

此外，如果您有多个无线电组，则$('input[type=radio]').each()需要更具体。在这种情况下，你应该为每个无线电$('input.specific-radios').each()添加一个类或将它们包装在父$('.specific-radios-group input[type=radio]').each()
中

如何使用jQuery为某些单选按钮强制使用文本框？

2 个答案:

试试这个fiddle