Question

我有一个HTML表单，并且我使用JQuery Validate插件要求某些表单字段是必需的。我有一个单选按钮字段，有3个选项：

小时天不确定

和另一个字段，用于输入与小时或天数选择对应的数字。如果用户选择＆＃34;不确定＆＃34;他们不需要输入数字。这很好 - 当用户选择＆＃34;不确定＆＃34; ＆＃34;此字段是必填字段。＆＃34;标签消失，但它仍然是数字输入字段，即使不再需要。一旦用户点击了＆＃34; Unsure＆＃34;我就无法解决如何让该标签消失的问题。单选按钮不再需要它。

此处是我的HTML：

<form role="form" action="#" method="post" id="durationForm">
 <tr>
 <td colspan = "3">Please enter the duration?</td>
 </tr>
 <tr>
<td width="10%"><input type="number" class="form-control" id="duration"  name="duration" required="true" /></td>
 <label for="durationNumber" class="validateError"></label>
 <td width="50%">
 <div class="controls">
 <label class="radio">
<input type="radio" name="radioduration" value="Hours" required="true" /> Hours</label>
 <label class="radio">
<input type="radio" name="radioduration" value="Days" required="true" /> Days</label>
 <label class="radio">
<input type="radio" name="radioduration" class="jradiodurationUnsure" value="Unsure" required="true" /> Unsure</label>
 <label for="radioduration" class="validateError"></label>
 </div>
 </td>
 </tr>

 <button type="submit" class="btn btn-primary">Next</button>
 </form>

这是脚本：

$(document).ready(function () {
     // initialize the plugin
     $("#durationForm").validate({ 
         errorClass: "validateError",
         rules: {
             duration: {
                 required: '.jradiodurationUnsure:unchecked'
             }
         }
         });
     });

我还有一个jsfiddle显示了这一点。

Answer 1

首先你必须添加一个＆＃34; id＆＃34;在最后一个不确定的单选按钮上 -

<input type="radio" name="radioduration" id="abc" class="jradiodurationUnsure" value="Unsure" required="true" />

现在，根据该ID，您可以使用以下JQuery命令更新脚本部分 -

$(document).ready(function () {
    $('#abc').click(function () {
        $('#duration').hide('fast');
    enter code here}); 
});

使用上述命令，数字输入将隐藏。

HTML表单验证 - 根据条件验证隐藏所需的标签

1 个答案: