Question

我想我可能发现了一个我无法解决的错误。

JSfiddle

我有一个带有一些html5数据的HTML下拉列表。在更改时，jquery应找到所选选项并从该选项中提取数据，然后选中一些框。

我不知道如何解释它除了转到jsfiddle并尝试它。第一个选项应检查前半部分框，第二个选项应选中所有复选框。

我希望这里有人可以告诉我我做错了什么。请务必更改选择框3-4以获得有趣的行为。

最佳，莱恩

HTML

<h2>Features</h2>

<div class="form-group">
    <div class="col-md-12 required">
        <label for="feature_groups">Feature Group(Quick Select)</label>
        <select name="feature_groups" class="form-control" id="feature_groups">
            <option value="">Select One</option>
            <option data-group='3,4,7,8'>2reg</option>
            <option data-group='1,2,3,4,5,6,7,8'>fg1</option>
        </select>
    </div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
    <label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
    <label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
    <label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
    <label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
    <label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
    <label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
    <label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
    <input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
    <label for="Feature5FeatureId">Premium Rims</label>
</div>

JS

$(document).ready(function () {
    $('#feature_groups').change(function () {
        console.log($('option:selected', this));
        $('.feature_checks').attr('checked', false);
        if ($('#feature_groups option:selected') != '') {
            var arrData = $('option:selected', this).data('group').split(',');
            for (i in arrData) {
                $(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
            }
        }
    });
});

Answer 1

它是相同的old attr() vs prop() issue ....

使用.prop()设置选中状态而不是.attr()

$(document).ready(function () {
    $('#feature_groups').change(function () {
        console.log($('option:selected', this));
        $('.feature_checks').prop('checked', false);
        if ($('#feature_groups option:selected') != '') {
            var arrData = $('option:selected', this).data('group').split(',');
            for (i in arrData) {
                $(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
            }
        }
    });
});

演示：Fiddle

jQuery只能读取一次选择选项吗？

1 个答案: