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

Question

我有一个带有下拉列表和其他字段的表单，这些字段可能被标记为 .lated，如果选择的下拉列表值为 1，则会显示其他字段。这很有效，但我想将“必需”类添加到其输入类中。我尝试了下面的代码，但它不起作用。

    <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=""OptionId==1"" 

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

也就是说它检查所选 optionId 的 Id 值是否为 1，并将类“required”添加到具有标记的所有相关字段 "data-val-requiredif-expression=""OptionId==1""

Fiddle Setup

Answer 1

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

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

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

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 + '"]'); 

动态表达式传递到函数中，并在必填字段上设置类: 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);