Question

我试图实现以下功能：

如果您从第一个或第二个列表中选择[data-select =＆＃34; practice＆＃34;]，[data-select =＆＃34; law＆＃34;]则禁用第三个和第四个列表[data-select =＆＃34;其他＆＃34;]

或

如果您从第三个或第四个列表[数据集=＆＃34;其他＆＃34;]中选择，则禁用所有[数据集=＆＃34;默认＆＃34;]，但选择的一个

我遇到的问题是，如果你改变第一和第二[数据选择=＆＃34;练习＆＃34;]，[数据选择=＆＃34;法律＆＃34;]然后更改其中一个返回默认值，即使仍然选择前两个中的一个，选择[data-select =＆＃34;其他＆＃34;]也会被禁用。

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

你也可以找到一个工作小提琴：http://jsfiddle.net/qppa4qpe/16/

选择列表禁用出错

1 个答案: