【问题标题】:jquery hidden div remove field requiredjquery隐藏的div删除字段需要
【发布时间】:2018-08-21 19:19:02
【问题描述】:

如何删除隐藏字段中的必需项。它必须保持在可见字段中所需的必要条件。选择其中一个选项时,需要删除必填字段。这个表单创建了 django 框架。

例如选择“tuzel”时,需要从adi字段中去掉必填字段。

jQuery 代码

<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 -->

【问题讨论】:

  • 只需从字段中删除所需的属性。 $('#id_adi')..removeAttr('required');并在未选择“tuzel”时添加属性。
  • 我以前试过这个。当字段可见时也删除(显示)
  • 检查这个小提琴:jsfiddle.net/nfc4yqds/7.. 我已经为你创造了。
  • @AbdulRauf 如果隐藏字段多于一个,我们可以只处理我们指定的字段吗?

标签: javascript jquery django django-forms


【解决方案1】:
if(optionValue){
    $(".col").not("." + optionValue).hide();
    $(".col").not("." + optionValue).removeAttr('required');​​​​​
    $("." + optionValue).show();
    $("." + optionValue).attr('required', true);
}

【讨论】:

  • 感谢您参与 stackoverflow ccesare。 :) 虽然此代码可能会回答问题,但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
【解决方案2】:

我已经使用你的代码创建了一个小提琴,你可以如何在文件上应用。

看到这个: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();
});

【讨论】:

    猜你喜欢
    • 2014-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多