主页 / 问题 / 617734
Accepted
Игорь
Asked:2020-01-22 02:44:50 +0000 UTC2020-01-22 02:44:50 +0000 UTC

取决于所选复选框的字段活动

  • 772

你好！例如，有两个复选框，android加上ios下面的两个多选 - 我们称它们为android-selectand ios-select（为了不麻烦连接插件，在示例中只有两个输入）。这两个复选框最初都处于选中状态。

条件如下：

  • 如果两个复选框都被选中，则两个输入都处于活动状态；
  • 如果未选中复选框，则两个输入均处于活动状态；
  • 如果选择android，ios-select则变为非活动状态，android-select- 分别为活动状态；
  • 如果选择ios，android-select不活动，ios-select- 活动。

我写了一个脚本，但不可能在其中反映整个场景（当两个复选框都被选中时，输入是不活动的），一般来说，我知道它是弯曲的/倾斜的，不应该这样做。请显示更正确和简洁的版本...

沙盒。

$(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>

javascript

2 个回答

  1. Best Answer

    您需要检查所有字段是否都处于活动状态

    JS选项：

    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>

    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>

    • 2

  2. 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()
});
    • 2

相关问题