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

我正在使用JSP，我有一个HTML表单，在表单的顶部有一个按钮，即进程按钮。现在，如果我点击这个进程按钮，它会显示一个表单，它有两个单选按钮-

TestClient

和

TestServer

该表单中还有

Submit

按钮

这是我的名片

现在我要做的是——只要我点击

TestClient

单选按钮，我需要在按下提交按钮之前输入

firstName

textbox和

lastName

textbox。这意味着这两个文本框对于

TestClient

单选按钮是必需的，如果有人为

TestClient

单选按钮输入了第三个文本框，那么它应该在该文本框旁边显示错误消息。但是如果我点击

TestServer

单选按钮，所有三个文本框都是必需的，这意味着我需要在所有三个文本框中输入一些内容

可能是，我可以使用禁用提交按钮功能，以及如果某些条件不符合与适当的消息旁边的文本框

---

我不熟悉jQuery，所以仍在学习。

我认为在这里最好的做法是

隐藏（）不必要的字段，如。当选择
TestClient
按钮时，将隐藏
address
字段，但当选择
TestServer
按钮时，将显示该字段。这避免了填写框的混乱：人们往往不喜欢错误消息，即使它们的措辞很友好。
试试这个
要确定表单是否可提交，可以使用
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
方法

// run initial validation
validate();

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

// run validation on input keyup
$('#form_process input').keyup(function() {
    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（）
函数可能需要更复杂一些

另外，
$（'input[type=radio]'）。如果您有多个无线电组，则每个（）都需要更加具体。在这种情况下，您可能应该为每个收音机
$（'input.specific radios'）添加一个类。each（）
或将它们包装在父级
$（'.specific radios group input[type=radio]'）。each（）
感谢您的帮助，它工作得很好。我也有类似的问题。看看你能不能帮我。谢谢你的帮助，效果很好。我也有类似的问题。看看你能不能帮我。
<input type="radio" name="client" id="client" value="TestClient" checked="checked">TestClient 
<input type="radio" name="client" id="server" value="TestServer">TestServer

// 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();
    });
});