Question

我有两个标签，如图所示：

<div class="tab-content">

    <div role="tabpanel" class="tab-pane fade in active" id="script-submit">
       <input type="checkbox" id="cflow_flag"> Enable Coverage report<br>
       <button type="button" id="submit-job"  class="btn btn-primary">Submit</button>
    </div>

    <div role="tabpanel" class="tab-pane fade" id="commit-view">
       <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button>
    </div>

</div>

选中/取消选中此框后，我需要使用$('#script-submit #submit-job)按钮切换$('#commit-view #submit-cflow')按钮

注意：请注意，在任意时间，#script-submit和#commit-view两个标签中只有一个会有效

Answer 1

您的checkbox不应在tabpanel内。由于您希望根据checkbox状态进行切换，因此您必须默认隐藏一个元素。请尝试以下方法：

＆＃13;

$('#commit-view').hide();
$('#cflow_flag').change(function(){
  if($(this).is(":checked")) {
        $('#commit-view').show();
        $(this).siblings().hide();
    } else {
        $(this).siblings().show();
        $('#commit-view').hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="script-submit">
       <input type="checkbox" id="cflow_flag"> Enable Coverage report<br>
       <button type="button" id="submit-job"  class="btn btn-primary">Submit 1</button>
    </div>

    <div role="tabpanel" class="tab-pane fade" id="commit-view">
       <button type="button" id="submit-cflow" class="btn btn-primary">Submit 2</button>
    </div>
</div>

＆＃13;

Answer 2

默认情况下，您可以使用CSS隐藏其中一个并使用toggle()同时应用此jQuery脚本：

＆＃13;

jQuery('#cflow_flag').on("change", function() {
  jQuery('#submit-job').toggle();
  jQuery('#submit-cflow').toggle();
});

＆＃13;

#submit-cflow {
  display: none; 
  color: green;
}
#submit-job {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content">

    <div role="tabpanel" class="tab-pane fade in active" id="script-submit">
       <input type="checkbox" id="cflow_flag"> Enable Coverage report<br>
       <button type="button" id="submit-job"  class="btn btn-primary">Submit</button>
    </div>

    <div role="tabpanel" class="tab-pane fade" id="commit-view">
       <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button>
    </div>

</div>

＆＃13;

Answer 3

所以我已经实现了一个我并不完全满意的答案，但对我来说却是这样。我想看看是否有一个复杂的解决方案

<div class="tab-content">

    <div role="tabpanel" class="tab-pane fade in active" id="script-submit">
       <input type="checkbox" id="cflow_flag"> Enable Coverage report<br>
       <button type="button" id="submit-job"  class="btn btn-primary">Submit</button>
       <button type="button" id="submit-cflow" class="btn btn-primary hidden">Submit</button>
    </div>

    <div role="tabpanel" class="tab-pane fade" id="commit-view">
       <button type="button" id="submit-cflow" class="btn btn-primary">Submit</button>
    </div>

</div>

我的JS是

$('#script-submit #cflow_flag').change(function(){
  $('#script-submit #submit-job').toggleClass('hidden');
  $('#script-submit #submit-cflow').toggleClass('hidden');
});

Jquery在复选框上切换两个div

3 个答案: