jQuery Simple Example

by aaronfranco

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="col-sm-5">        
        <div class="form-group">
            <label>Recipient</label>
            <textarea class="form-control" rows="5" id="recipient"></textarea>
        </div>           
        <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" rows="5"></textarea>
        </div>            
        <button type="submit" class="btn btn-default">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>        
    </div>
<div class="col-sm-5">
        <label>&nbsp;</label>
        <div class="col-sm-12">  
            <div class="panel panel-primary">
                <div class="panel-heading"> 
                    <h3 class="panel-title">Address Book</h3> 
                </div>
                <div class="panel-body">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="member" value="A">A
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="member" value="B">B
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="firm" value="C">C
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="firm" value="D">D
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="firm" value="E">E
                        </label>
                    </div>
                    <div...

JavaScript

$(document).ready(function() {
  var checkboxes = $("input[type='checkbox']");

  checkboxes.on('change', function() {
      $('#recipient').val(
          checkboxes.filter(':checked').map(function(item) {
              return this.value;
      }).get().join('; ')
   );
  });
  
  $(".firm[value='C']").change(function(){
        $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
        $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));  
    });
});