Question

我有一个下拉菜单，其中包含所有默认选择的选项。当我取消选择一个选项时，我要禁用一个div。但是，如果有人选择了它，我想重新启用它。

我有一个有效的代码，但这很幼稚。当前，无论何时下拉列表上发生更改事件，我都会得到所有未选择的选项和已选择的选项。并相应地应用或删除css。

class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        if #available(iOS 13.0, *) {
        } else {
            let tabViewController = self.window!.rootViewController as! TabViewController
            let splitViewController = tabViewController.viewControllers![0] as! SplitViewController
            let navigationController = splitViewController.viewControllers[splitViewController.viewControllers.count-1] as! UINavigationController
            navigationController.topViewController!.navigationItem.leftBarButtonItem = splitViewController.displayModeButtonItem
            navigationController.topViewController!.navigationItem.leftBarButtonItem?.tintColor = UIColor(named: "Theme Colour")

            splitViewController.preferredDisplayMode = .allVisible
        }

        return true
    }

这是jQuery代码：

<select class="ss-select" data-dropup-auto="false" id="ss_options" multiple="multiple" name="ss">
    <option selected="selected" value="1">One</option>
    <option selected="selected" value="2">Two</option>
    <option selected="selected" value="3">Three</option>
    <option selected="selected" value="4">Four</option>
    <option selected="selected" value="5">Five</option>
</select>

上面的代码可以正常工作，但是会再次遍历下拉选项的所有列表，并应用/删除css。有没有优化的方法？

Answer 1

有没有一种优化方法？

您可以定义一个类，例如：

<style>
    .newclass {
        pointer-events: none;
        opacity: 0.4
    }
</style>

现在，在更改事件中，您可以在元素上切换该类：

$("#ss_options").on('change', function (e) {
    $("div.radio-block > *").addClass('newclass');
    $(this).find('option:selected').each(function(idx, ele) {
        $("div.radio-block:has(label:contains('" + ele.text + "')) > *").removeClass('newclass');
    });
});

.newclass {
    pointer-events: none;
    opacity: 0.4
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select class="ss-select" data-dropup-auto="false" id="ss_options" multiple="multiple" name="ss">
    <option selected="selected" value="1">One</option>
    <option selected="selected" value="2">Two</option>
    <option selected="selected" value="3">Three</option>
    <option selected="selected" value="4">Four</option>
    <option selected="selected" value="5">Five</option>
</select>

<div class="col-sm-8">
    <div class="radio-block">
        <input type="checkbox" id="ss_options_checkbox1" class="ss-options-checkbox ss-hidden-checkbox-input">
        <label for="ss_options_checkbox1" class="ss-checkbox-legend">One</label>
    </div>
</div>
<div class="col-sm-8">
    <div class="radio-block">
        <input type="checkbox" id="ss_options_checkbox2" class="ss-options-checkbox ss-hidden-checkbox-input">
        <label for="ss_options_checkbox2" class="ss-checkbox-legend">Two</label>
    </div>
</div>
<div class="col-sm-8">
    <div class="radio-block">
        <input type="checkbox" id="ss_options_checkbox3" class="ss-options-checkbox ss-hidden-checkbox-input">
        <label for="ss_options_checkbox3" class="ss-checkbox-legend">Three</label>
    </div>
</div>
<div class="col-sm-8">
    <div class="radio-block">
        <input type="checkbox" id="ss_options_checkbox4" class="ss-options-checkbox ss-hidden-checkbox-input">
        <label for="ss_options_checkbox4" class="ss-checkbox-legend">Four</label>
    </div>
</div>
<div class="col-sm-8">
    <div class="radio-block">
        <input type="checkbox" id="ss_options_checkbox5" class="ss-options-checkbox ss-hidden-checkbox-input">
        <label for="ss_options_checkbox5" class="ss-checkbox-legend">Five</label>
    </div>
</div>

在下拉菜单中查找具有更改（选定值或未选定值）的确切标签

1 个答案: