Question

我有一个带有下拉列表的表单和其他可能被标记为.related的字段，如果选择的下拉值为1则显示其他字段。这很好但我想添加课程＆＃34; required＆＃34;他们的输入课程。我尝试了下面的代码，但它不起作用。

    <div class="related row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label" for="OptionId">Pay by</label>
                <select class="form-control input-lg" id="OptionId" name="OptionId" required="required">
                    <option value="">-- Choose --</option>
                    <option value="1">Transfer</option>
                    <option value="2">Cheque</option>
                </select>

            </div>
        </div>
        <div class="row">
            <div class="requiredfields">

                <div class="col-md-offset-05 col-md-3">
                    <div class="form-group">
                        <label class="control-label" for="AcctName">Account Name</label>
                        <input class="form-control input-lg" data-val-requiredif="Account Name Required" data-val-requiredif-expression="&quot;OptionId==1&quot;"  id="AcctName" name="AcctName" type="text" value="" />

                    </div>
                </div>

                <div class=" col-md-offset-05 col-md-2">
                    <div class="form-group">
                        <label class="control-label" for="Bank">Bank Account</label>
                        <input class="form-control input-lg" data-val-requiredif="Account Number Required" data-val-requiredif-expression="&quot;OptionId==1&quot;" id="Bank" name="Bank" type="text" value="" />

                    </div>
                </div>

            </div>
        </div>
    </div>

我在下面有这个代码，最初只为一个字段定制。但是我现在想要一些通用的和可重用的，以满足基于我上面解释的标记的要求。

var showHideFieldsSelect = function (el, val) {
    el.each(function () {
        var select = $(this).find("select").first(),
            dVersion = $('[name=Version]');
        select.change(function () {
            var thisOption = $(this);
            if (thisOption.find(":selected").val() === val) {
                thisOption.closest(".related").find(".requiredfields").show();
                thisOption.closest(".related").find(".sub").hide();
            } else {
                thisOption.closest(".related").find(".requiredfields").hide();
            }
            thisOption.val() ? id.fadeIn() : id.hide();

            console.log(thisOption.find(":selected").val())

            thisOption.find(":selected").val() === "1" ? dVersion.addClass('required') : dVersion.removeClass('required');

        }).trigger("change");
    });
}
showHideFieldsSelect(related, '1');

我需要帮助，因为我的javascript库已经搞砸了。优选地，存在默认的流畅验证，其未能触发但是它将所需的标记与下面的字段示例

 "data-val-requiredif="Account Name Required" data-val-requiredif-expression="&quot;OptionId==1&quot;"

最好是建议的解决方案将选择这些元素并将所需的属性添加到输入字段。我已经尝试了很多选项来使这个默认验证工作，但无济于事。所以现在我必须做一个黑客攻击。

也就是说它检查所选optionId的Id值，如果是1，则添加类＆＃34; required＆＃34;到具有标记"data-val-requiredif-expression=""OptionId==1""

的所有相关字段

Fiddle Setup

Answer 1

我已更新您的小提琴以包含JQuery，并将对象数组传递给函数调用。

我认为你想要的mod的工作小提琴，如果你在下拉列表中选择1，则需要字段，否则它们不是。

https://jsfiddle.net/hg4w3cxy/2/ - 使用您的Javascript，将set属性设置为Required。

var items = $('input[data-val-requiredif-expression*="OptionId==' + val + '"]');
items.prop('required',thisOption.find(":selected").val() === val);

https://jsfiddle.net/hg4w3cxy/3/

更改添加：

    select.change(function () {
        var thisOption = $(this);
        var related = thisOption.closest(".related");
        var items = $('input[data-val-requiredif-expression*="OptionId==' + val + '"]');            

        if (thisOption.val() === val) {             
          related.find(".requiredfields").show().addClass("required");
          related.find(".sub").hide();
        }
        else {
            related.find(".requiredfields").hide();
        }
        items.prop('required',thisOption.val() === val);
    }).trigger("change");

传递给函数的动态表达式： https://jsfiddle.net/ab6e7k5d/

Line 1
var showHideFieldsSelect = function (el, val, matchingExpression) {

Line 21
showHideFieldsSelect($('.related'), '1','OptionId');

动态表达式作为.Related的属性 https://jsfiddle.net/tyt5pmx5/

Line 8 - 9
var matchingExpression = related.attr("data-matching-expression")
var items = $('input[data-val-requiredif-expression*="'+matchingExpression+'==' + val + '"]');

动态表达式在必填字段中使用Set Class传递到函数中： https://jsfiddle.net/ab6e7k5d/5/

var thisOption = $(this);
var related = thisOption.closest(".related");            
var items = $('input[data-val-requiredif-expression*="'+matchingExpression+'==' + val + '"]'); 
var required = thisOption.val() === val;

related.find(".requiredfields").toggle(required);
related.find(".sub").toggle(!required);            
items.prop('required',required).toggleClass("required",required);

如果下拉选择值为1，则JQuery添加必需属性

1 个答案: