Jquery toggle two divs upon checkbox

Question

I have two tabs as shown:

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

upon checking/unchecking the box i need to toggle the $('#script-submit #submit-job) button with the $('#commit-view #submit-cflow') button

Note: Please note that only one out of the two tabs, #script-submit and #commit-view will be active at any given time

See this answer for a push in the right direction: http://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off — Jeff Escalante, Apr 24 '17 at 23:14
Were's your code, what have you tried. We are here to help, but only if you've tried it and showed us what you've tried. — , Apr 24 '17 at 23:16

score 0 · Answer 1 · answered Apr 24 '17 at 23:45

You can hide one of them by default with CSS and apply this jQuery script, using toggle() on both:

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

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

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

score 0 · Answer 2 · answered Apr 26 '17 at 21:42

So I have implemented an answer which i am not completely happy with but does that trick for me. I would like to see if there is a sophisticated solution

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

and my JS is

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

Jquery toggle two divs upon checkbox

2 Answers2