如果使用隐藏/显示条件控制,则表单输入隐藏字段不需要

时间:2018-01-22 22:14:55

标签: javascript jquery forms

在我的表单中,我使用JavaScript隐藏并通过选择显示一些字段。它完美地工作但我想只在显示这些输入字段时才需要这些字段,否则它应该是非必需的。我在两个输入字段中都添加了必需属性,但是当我选择no并且输入字段被隐藏时,表单提交不起作用。删除所需的属性后,它才有效。

<select name="tab" size="1" class="combo2" id="chkYes">

    <option value="">Select One</option>

    <option value="Yes">Yes</option>
    <option value="No">No</option>

</select>

以下是根据上述选择显示的输入字段。

<tr id="issuc" style="display:none;">
    <td><input name="country_issue" type="text" value="" required></td>
</tr>    
<tr id="ppno1" style="display:none;"><td>
    <input name="oth_ppt_no" type="text" value="" maxlength="26" size="43" required></td>
</tr>

这是控制它的JavaScript。

<script>
$(document).ready(function(){
    $('#chkYes').on('change', function() {

    if ( this.value == 'Yes')

     {
      $("#issuc , #ppno1").show();
    } else {
      $("#issuc , #ppno1").hide();
    }
  });
});
</script>

2 个答案:

答案 0 :(得分:1)

将这些内容放入if语句

$("#issuc , #ppno1").prop('required',true);

$("#issuc , #ppno1").prop('required',false);

答案 1 :(得分:1)

您可以像这样使用.prop函数:

$("#issuc input, #ppno1 input").prop("required", false)

删除必需的属性,并通过将第二个参数更改为true来将其添加回来。

Demo