CODEWITHSUNDEEP
javascriptjqueryhtmlselect
Rymn
Rymn

Reputation: 186

jQuery can only read select option once?

I think I may have found a bug I can't work around.

JSfiddle

I have an HTML dropdown with some html5 data. On change the jquery should find the selected option and pull the data from that option, then check some boxes.

I don't know how else to explain it except goto the jsfiddle and try it. The first option should check the first half of boxes and the second option should select all the checkboxes.

I hope someone here can tell me what I'm doing wrong. Be sure to change the select box 3-4 for interesting behavior.

Best, Ryan

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);
            }
        }
    });
});

Upvotes: 0

Views: 164

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It is the same old attr() vs prop() issue....

Use .prop() to set the checked state instead of .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);
            }
        }
    });
});

Demo: Fiddle

Upvotes: 2

Related Questions