JSFiddle - React, Tailwind, and code Playground

by cherryflavourpez

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.css">
<form>
<ul class="inputs-list">
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option1" />
        <span>Option 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option2" />
        <span>Option 2</span>
      </label>
    </li>
</ul>
<div class="actions">
    <input type="submit" class="btn large primary" value="Save changes &raquo;">
</div>
</form>

<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Are you sure?</h3>
    </div>
    <div class="modal-body">
        <p>You haven&rsquo;t selected any options.</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Okay &raquo;</a>
        <a href="#" class="btn secondary">Go back</a>
    </div>
</div> <!-- /modal -->

JavaScript

$(document).ready(function() {
    $('form').submit(function(event) {
        var $target = $('.inputs-list').find(':checkbox');
        if (!$target.is(':checked')) { // if none of the sub-options are checked
            event.preventDefault();
            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        }
    });
    $('#my-modal .secondary').click(function() {
        $('#my-modal').modal({
            show: 'false'
        });
    });
});