选择 selectpicker 选项后如何选中复选框？答案

【问题标题】：How to checked checkbox after selecting selectpicker option?选择 selectpicker 选项后如何选中复选框？
【发布时间】：2017-05-04 05:27:06
【问题描述】：

我是 jquery 的新手。我已经完成了一半的工作。但我没有找到任何解决方案。

在这里您可以看到图像有四个复选框指甲、头发、护肤、按摩。我希望当用户点击沙龙时，移动美容师和美甲上方的复选框都会被打勾，当用户点击选择您的服务美甲复选框时会被取消选中，因此这适用于所有人。我已经这样做了，但问题是当我第二次从指甲中选择该项目时，未选中该复选框。它只工作一次。请帮我。这里我有代码：-

HTML:-

<div class="one-row">
    <?php foreach ($services as $key => $allservices) {
        if ($key <= 3) {
            if (!empty($data['services'])) {
                if (in_array($allservices['id'], $data['services'])) {
                    $checked = "checked";
                } else {
                    $checked = "";
                }
            } else {
                $checked = "";
            } ?>
            <div class="div_img_part-2">
      <span class="img_part_class-2"><img src="{{ asset('images/ServiceImages/'. $allservices['image'])}}">
                </span>
                <span class="text_part_class-2">
                     <p class="custom-checkbox firstpart">
                         <input class="firstdisable" type="checkbox" id="{{ $key }}" name="services[]"
                                value="{{ $allservices['id'] }}" <?= $checked; ?>/>
                         <label for="{{ $key }}">{{$allservices['name']}}</label>
                     /p>
                </span>
                </span>
                <select name="service_type[<?php echo $allservices['name']; ?>]" class="selectpicker">
                    <option value="">Select Your Sevice</option>
                    <option value="Salon" <?php if (!empty($data['service_type'][$allservices['name']])) {
                        if ($data['service_type'][$allservices['name']] == "Salon") { ?> selected
                        <?php }
                    } ?> >Salon
                    </option>
                    <option value="Mobile beautician" <?php if (!empty($data['service_type'][$allservices['name']])) {
                        if ($data['service_type'][$allservices['name']] == "Mobile beautician") { ?> selected
                        <?php }
                    } ?> >Mobile beautician
                    </option>
                    <option value="Both" <?php if (!empty($data['service_type'][$allservices['name']])) {
                        if ($data['service_type'][$allservices['name']] == "Both") { ?> selected
                        <?php }
                    } ?>>Both
                    </option>
                </select>
            </div>
        <?php }
    } ?>
</div>

我正在使用 Laravel 框架这是我的 jQuery 代码：-

$('.selectpicker').selectpicker('refresh');
$(".selectpicker").on('change', function() {
    var value = $(this).parents(".div_img_part-2").find(".selectpicker").val();
    alert(value);
    if (value == "") {
        $(this).parents(".div_img_part-2").find("input[type='checkbox']").attr('checked', false);
        if ($("input:checked").length == 0) {
            $('.disable').prop('disabled', false);
            $('.selectpicker').selectpicker('refresh');
        }
    } else {
        $(this).parents(".div_img_part-2").find("input[type='checkbox']").attr('checked', true);
    }
});

【问题讨论】：

使用 .prop() 而不是 attr() 来选中/取消选中您的复选框。

标签： javascript php jquery laravel-5.2

【解决方案1】：

使用最接近() 和prop() 代替parent() 和attr()。

试试这个：

$(".selectpicker").on('change', function () {
    var value = $(this).val();
    if (value == "") {
        $(this).closest(".div_img_part-2").find("input[type='checkbox']").prop('checked', false);
        if ($("input:checked").length == 0) {
            $('.disable').prop('disabled', false);
            $('.selectpicker').selectpicker('refresh');
        }
    } else {
        $(this).closest(".div_img_part-2").find("input[type='checkbox']").prop('checked', true);
    }
});

【讨论】：