Hello! There are two checkboxes, say, android and ios plus two multi-selections below - let's call them android-select and ios-select (so as not to bother with connecting the plug-in, in the example there will be just two inputs). Checkboxes are both initially selected.

The conditions are as follows:

  • if both checkboxes are selected, both inputs are active;
  • if no checkbox is selected, both inputs are active;
  • if android selected, ios-select becomes inactive, android-select is respectively active;
  • if ios selected, android-select is inactive, ios-select is active.

I wrote a script, but I could not reflect the whole script in it (when both checkboxes are selected, the input paths are inactive) and in general I understand that it is curved / oblique and that should not be done. Please show a more correct and concise version ...

Sandbox

 $(document).ready(function() { if ($('#android').is(':checked')) { $('#ios-select').addClass('inactive'); } else { $('#ios-select').removeClass('inactive'); } }); $('#android').on('change', function() { if(this.checked) { $('#ios-select').addClass('inactive'); } else { $('#ios-select').removeClass('inactive'); } }); $(document).ready(function() { if ($('#ios').is(':checked')) { $('#android-select').addClass('inactive'); } else { $('#android-select').removeClass('inactive'); } }); $('#ios').on('change', function() { if(this.checked) { $('#android-select').addClass('inactive'); } else { $('#android-select').removeClass('inactive'); } }); 
 .checkbox-block { margin-bottom: 20px; } .multiselect-block > div { margin-bottom: 5px; } .multiselect-block input.inactive { opacity: .5; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="checkbox-block"> <input id="android" type="checkbox" checked> <label for="android">Android</label> <input id="ios" type="checkbox" checked> <label for="ios">iOS</label> </div> <div class="multiselect-block"> <div> <input id="android-select" type="text" placeholder="android-select" > </div> <div> <input id="ios-select" type="text" placeholder="ios-select"> </div> </div>

    2 answers 2

    It is necessary to check whether all fields are active.

    JS Option:

     var android = document.getElementById('android'), ios = document.getElementById('ios'), android_select = document.getElementById('android-select'), ios_select = document.getElementById('ios-select'); var ins = function() { if(android.checked == true){ android_select.classList.remove('inactive'); }else if(ios.checked == true){ android_select.classList.add('inactive'); }else{ android_select.classList.remove('inactive'); ios_select.classList.remove('inactive'); }; if(ios.checked == true){ ios_select.classList.remove('inactive'); }else if(android.checked == true){ ios_select.classList.add('inactive'); }else{ android_select.classList.remove('inactive'); ios_select.classList.remove('inactive'); }; }; window.onload = function() { ins(); }; document.getElementById('android').onchange = function() { ins(); }; document.getElementById('ios').onchange = function() { ins(); }; 
     .checkbox-block { margin-bottom: 20px; } .multiselect-block > div { margin-bottom: 5px; } .multiselect-block input.inactive { opacity: .5; } 
     <div class="checkbox-block"> <input id="android" type="checkbox" checked> <label for="android">Android</label> <input id="ios" type="checkbox" checked> <label for="ios">iOS</label> </div> <div class="multiselect-block"> <div> <input id="android-select" type="text" placeholder="android-select" > </div> <div> <input id="ios-select" type="text" placeholder="ios-select"> </div> </div>

    Option jQuery:

     var android = $('#android'), ios = $('#ios'), android_select = $('#android-select'), ios_select = $('#ios-select'); var ins = function() { if(android.prop('checked')){ android_select.removeClass('inactive'); }else if(ios.prop('checked')){ android_select.addClass('inactive'); }else{ android_select.removeClass('inactive'); ios_select.removeClass('inactive'); }; if(ios.prop('checked')){ ios_select.removeClass('inactive'); }else if(android.prop('checked')){ ios_select.addClass('inactive'); }else{ android_select.removeClass('inactive'); ios_select.removeClass('inactive'); }; }; $(function() { ins(); }); android.change(function() { ins(); }); ios.change(function() { ins(); }); 
     .checkbox-block { margin-bottom: 20px; } .multiselect-block > div { margin-bottom: 5px; } .multiselect-block input.inactive { opacity: .5; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="checkbox-block"> <input id="android" type="checkbox" checked> <label for="android">Android</label> <input id="ios" type="checkbox" checked> <label for="ios">iOS</label> </div> <div class="multiselect-block"> <div> <input id="android-select" type="text" placeholder="android-select" > </div> <div> <input id="ios-select" type="text" placeholder="ios-select"> </div> </div>

      http://codepen.io/anon/pen/EZmgWZ

       function changed(e){ var checkedLen = $('.checkbox-block input:checked').length; $('.multiselect-block input').removeClass('inactive'); if( checkedLen == 1){ var $checkInput = ($('.checkbox-block input:checked').attr('id') == 'android') ? 'ios' : 'android'; $('#'+$checkInput+'-select').addClass('inactive'); } } $(document).ready(function() { $('.checkbox-block input').on('change', changed); changed() });