javascript - 选择列表禁用出错

Question

我正在尝试实现以下功能:

如果您从第一个或第二个列表中选择 [data-select="practise"]、[data-select="law"]，则禁用第三个和第四个列表 [data-select="other"]

或

如果您从第三个或第四个列表中选择 [data-set="other"]，则禁用除所选列表之外的所有 [data-set="default"]

我遇到的问题是，如果您更改第一个和第二个 [data-select="practise"],[data-select="law"]，然后将其中一个更改回默认值，则选择 [data-select ="other"] 即使仍选择前两个之一，也会被禁用。

HTML

<fieldset>
    <div class="form-group">
        <label for="beta-filter1">Practice</label>
        <select class="form-control" id="beta-filter1" data-set="default" data-select="practise">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
            <option label="Asperiores" value="asperiores">Asperiores</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter2">Area of Law</label>
        <select class="form-control" id="beta-filter2" data-set="default" data-select="law">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
            <option label="Asperiores" value="asperiores">Asperiores</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter3">Practice Region</label>
        <select class="form-control" id="beta-filter3" data-set="default" data-select="other">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
            <option label="Asperiores" value="asperiores">Asperiores</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter4">Industry</label>
        <select class="form-control" id="beta-filter4" data-set="default" data-select="other">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter5">Office</label>
        <select class="form-control" id="beta-filter5">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter6">Law School (optional)</label>
        <select class="form-control" id="beta-filter6">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
        </select>
    </div>
    <div class="form-group">
        <label for="beta-filter7">Date (optional)</label>
        <select class="form-control" id="beta-filter7">
            <option label="Please select" value="">Please select</option>
            <option label="Excepturi saepe" value="excepturi">Excepturi saepe</option>
        </select>
    </div>
</fieldset>

JS

$('select').change(function() {
    var $this = $(this);
    var $myVal = $this.val();
    var $defaultSelect = ('[data-set="default"]');
    var $otherSelect = ('[data-select="other"]');
    var $mySelect = $this.attr('data-select');

    if($mySelect === 'practise' || $mySelect === 'law') {
        var $others = $this.closest('fieldset').find($otherSelect);
        compare();
    } else if ($mySelect === 'other') {
        var $others = $this.closest('fieldset').find($defaultSelect).not($this);
        compare();
    }
    function compare() {
        if ($myVal !== '') {
            $others.prop('disabled',true);
        } else {
            $others.prop('disabled',false);
        }
    }
});

Answer 1

我已将您的 JavaScript 修改为:

$('select').change(function() {
    var self = $(this);
    var myVal = self.val();
    var selPractice = $('[data-select="practise"]');
    var selLaw = $('[data-select="law"]');
    var defaultSelect = $('[data-set="default"]');
    var otherSelect = $('[data-select="other"]');
    var mySelect = self.attr('data-select');

    if(mySelect === 'practise' || mySelect === 'law') {
        var others = self.closest('fieldset').find(otherSelect);
        if (selPractice.val() == '' && selLaw.val()=='' ) {
            others.prop('disabled',false);
        }
        else {
            others.prop('disabled',true);
        }

    } else if (mySelect === 'other') {
        var others = self.closest('fieldset').find(defaultSelect).not(self);
        compare();
    }
    function compare() {        
        if (myVal !=='') {
            others.prop('disabled',true);
        } else {
            others.prop('disabled',false);
        }
    }
});

您还可以在以下位置找到可用的 fiddle :http://jsfiddle.net/qppa4qpe/16/