javascript - select list disabling going wrong -

javascript - select list disabling going wrong -

i'm trying accomplish next functionality:

if select first or sec list [data-select="practise"],[data-select="law"] disable 3rd , 4th list [data-select="other"]

or

if select 3rd or 4th list [data-set="other"] disable [data-set="default"] except 1 selected

the problem having if alter first , sec [data-select="practise"],[data-select="law"] alter 1 of default, selects [data-select="other"] become disabled though 1 of first 2 still selected.

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

i have modified javascript to:

$('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); } } });

you can find working fiddle at: http://jsfiddle.net/qppa4qpe/16/

javascript jquery select onchange