时间戳

首页 > 解决方案 > 如何限制两个字段的选择不覆盖其他复选框？

jquery - 如何限制两个字段的选择不覆盖其他复选框？

问题描述

我为复选框创建了两个字段，但我正在努力限制我的复选框。这两个目前做什么，他们允许进行选择。但是每次我点击下载按钮时。它允许其他复选框自动下载，我不希望用户在前端看到它。下面是我的逻辑；

<!---- Checkbox for selecting it to download. -->
<div class = "custom-control custom-checkbox">
  <input type="checkbox" class ="custom-control-input" id="acceleration">
  <label class = "custom-control-label" for="acceleration">Acceleration</label>
</div>

<!---checkbox for button-state showing on/off when clicked. ---->
<div class ="custom-control custom-checkbox">
  <input type ="checkbox" class="custom-control-input" id="button_state">
  <label class ="custom-control-label" for = "button_state">Button-State</label>
</div>

<!----Download button into CSV file.  --->
<div class="form-group">
  <div class="col-md-1.9 text-center">
    <button id="download" name="download" class="btn btn-warning" >Download</button><br>
  </div> 
</div>

Javascript： 

$(function(){
  $("#download").click(function(e) {
    e.preventDefault();
    var isAccelerate = ($('#acceleration').is(':checked'));
    var isButtonState = ($('#button_state').is(':checked'));

    if (isAccelerate&&isButtonState) {
      window.open('https://api.thingspeak.com/channels/932891/feeds.csv?api_key=**&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
    }
    if (isAccelerate){
      window.open('https://api.thingspeak.com/channels/932891/fields/1.csv?api_key=***&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
    }
    if (isButtonState){
      window.open('https://api.thingspeak.com/channels/932891/fields/8.csv?api_key=***&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
    }
  });
});

JSFiddle：链接

标签： jqueryhtmlbootstrap-4

解决方案

根据 Freedomm-m。

<div class = "custom-control custom-checkbox">
  <input type="checkbox" class ="custom-control-input" id="acceleration">
  <label class = "custom-control-label" for="acceleration">Acceleration</label>
</div>
<div class ="custom-control custom-checkbox">
  <input type ="checkbox" class="custom-control-input" id="button_state">
  <label class ="custom-control-label" for = "button_state">Button-State</label>
</div>
<div class="form-group"><br>
  <div class="col-md-1.9 text-center">
    <button type="button" id="download" name="download" class="btn btn-warning" >Download</button><br>
  </div> 
</div> 

$(function(){
  $("#download").click(function(e) {
    e.preventDefault();
    var isAccelerate = ($('#acceleration').is(':checked'));
    var isButtonState = ($('#button_state').is(':checked'));

    if(isAccelerate && isButtonState) {
      window.open('https://api.thingspeak.com/channels/932891/feeds.csv?api_key=**&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
    }else{
      if(isAccelerate){
        window.open('https://api.thingspeak.com/channels/932891/fields/1.csv?api_key=***&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
      }
      if(isButtonState){
        window.open('https://api.thingspeak.com/channels/932891/fields/8.csv?api_key=***&start=2019-12-13T00:00+02&end=2019-12-17T23:59+02:00');
      }
    }
  });
});

演示：链接

推荐阅读