javascript - jquery 隐藏的 div 删除需要的字段

Question

如何删除隐藏字段中的必填项。它必须在可见字段中保持必填。选择其中一个选项后，需要删除必填字段。这种形式创建了 django 框架。

比如选择“tuzel”时，需要将adi字段中的required字段去掉。

J查询代码

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){

                $(".col").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".col").hide();

            }
        });
    }).change();
});
</script>

<select name="secenek" class="form-control select2" required id="id_secenek">
  <option value="" selected>---------</option>

  <option value="tuzel">Tüzel</option>

  <option value="gercek">Gerçek</option>
</select>

              <div class="tuzel col col-lg-6">
                <div  id="fnWrapper" class=" parsley-input">
                  <label class="form-control-label">Firma Ünvanı: <span class="tx-danger">*</span></label>
                    <input type="text" name="firma_adi" class="form-control" id="id_firma_adi" maxlength="256" required/>
                </div>
              </div><!-- col-4 -->
              <div class="gercek col col-lg-6">
                <div  id="fnWrapper" class=" parsley-input">
                  <label class="form-control-label">Adı: <span class="tx-danger">*</span></label>
                    <input type="text" name="adi" data-parsley-class-handler="#fnWrappe" class="form-control" required="True" id="id_adi" maxlength="128" required/>
                </div>
              </div><!-- col-4 -->

Answer 1

我已经使用您的代码创建了一个 fiddle ，您可以如何申请所需的文件。

看这个:fiddle example

你需要在JS中多加两行:

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            console.log(optionValue);
            if(optionValue){
                $(".col").not("." + optionValue).hide();
                $("." + optionValue).show();
                                $('input[type="text"]').removeAttr('required');
                                $("." + optionValue + " input").attr('required','true');
            } else{
                $(".col").hide();

            }
        });
    }).change();
});