Leaflet Switch MinZoom

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images/layers-2x.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images/layers.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images/marker-icon-2x.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images/marker-icon.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/images/marker-shadow.png"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
                         </div>
                                  <div class="col-md-6">
                    Mapping&nbsp; 
                                  <input type="checkbox" name="my-checkbox" id="osmCheck" checked data-size="mini">
                                  </div>
                                           <div class="col-md-6">
                    Example Layer&nbsp; 
                                  <input type="checkbox" name="my-checkbox2" id="osmCheck" data-size="mini" disabled>
                                    
                  </div>
                                      <div id="map" class="map">   
            </div>
        </div>
    </div>

CSS

html, body, #map {
    width: 100%;
    height: 90%;
}
#map {
    position: absolute;
}

JavaScript

var map = L.map('map', {
	zoomControl:true
	}).setView([37, -103], 3);

var streetsTile = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a><br>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoiam9zaGRpY2tlcnNvbjkyIiwiYSI6ImNpZW9kdHpyYTAwOTZ0bGtrMG1sa2t4dGsifQ._vVVpQ1n41eDOVr2fs7-jQ'
}).addTo(map);

var exampleTile = L.tileLayer.wms('http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer', {
    format: 'img/png',
    transparent: true,
    layers: 16,
    minZoom: 5
});

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(map);
}

map.on('click', onMapClick);

map.zoomControl.setPosition('topright');

$("[name='my-checkbox']").bootstrapSwitch({
    onSwitchChange: function (event, state) {
        
        if(state) map.addLayer(streetsTile);
        else map.removeLayer(streetsTile);
    }
});

$("[name='my-checkbox2']").bootstrapSwitch({
    onSwitchChange: function (event, state) {
        
        if(state) map.addLayer(exampleTile);
        else map.removeLayer(exampleTile);
    }
});

map.on('zoomend', function (e) {
	      // Add/remove layers based on zoom level
	      if (map.getZoom()>=5) {
		      $("[name='my-checkbox2']").bootstrapSwitch('disabled',false);
			  }
        else if (map.getZoom()<5) {
          $("[name='my-checkbox2']").bootstrapSwitch('disabled',true);
        }});