Question

我有这个代码，尝试了一些但没有工作，或者我只是放错了代码。

<script type="text/javascript">
    $(document).ready(function(){
    $('#fac').hide();//div fac
    $('#stud').hide();

    $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();   


    });

    $("#thechoices").change();
    });

    **if ($('#stud:not(:visible)')){
        $("#myform").validate({
           ignore: ":hidden"**
        });
    }

    </script>

我希望有其他必需的输入。我的表单的目标是隐藏和显示关于什么位置（教师或学生作为选择选项）并存储到数据库的输入。为学生和教师成员显示的不同输入字段（具有相同的名称用于数据库目的）。但是，当我选择学生时（现在显示学生输入字段并隐藏教师成员输入字段），填写字段，然后单击提交按钮，我无法继续，因为教师的隐藏字段（通过JS和选择标记）会员也需要填写。

这是我的表格：

<form name = "myform">
<label>Select Position</label>
            <select id="thechoices" name="position">        
                <option value="stud">Student</option>
                <option value="fac">Faculty Member</option>
            </select>
<div id = "all">    
    <div id="stud">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>

    <div id="fac">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>
</div>

该怎么办？我期待有关此问题的解决方案。非常感谢你提前。我已经尝试用资源（Here，Here等来解决我的问题已经有4个小时了。）我得到了但我不知道将这些代码放在哪里工作。

Answer 1

当您隐藏或显示输入时，您还可以更改其“必需”属性：

隐藏输入时：

$("#my_input").removeAttr("required");

当您显示输入时：

$("#my_input").attr("required","required");

在你的代码中执行以下操作：

 $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();

    var selection = this.value;   

     $("#" + this.value + "input").each(function()
      {
        $(this).attr("required","required");
      })

     $("#thechoices option").each(function()
      {
         if($(this).val()!=selection)
          {
             var id = $(this).val();
             $("#"+id+" input").each(function()
               {
                 $(this).removeAttr("required");   
               })
          }
       })

    });

Answer 2

我同意cretzzzu3000。我也想在选中时隐藏或显示相关字段。因此，用户根本不必担心剩余的字段。以下是我的尝试。

$(document).ready(function(){
    $('select').on('change',function(){
        var selected = this.value,
            div_all = $(this).next('div'),
            selected_div = div_all.children('div#'+selected);

        div_all.find('input[type=text]').removeAttr('required');
        selected_div.find('input[type=text]').attr('required','required');
        selected_div.fadeIn().siblings('div').fadeOut();
    });
});

希望有所帮助。感谢。

通过<select>验证可见输入JS </select>进行更改

2 个答案: