@model HelloWorldMvcApp.SampleViewModel
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
.field-validation-error {
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var initial = $('#UseForecast').is(':checked');
$('#MinimumOnHandQuantity').attr("disabled", "disabled")
$('#UseForecast').click(function() {
var $this = $(this).is(':checked');
$('#MinimumOnHandQuantity').removeAttr("disabled");
$('#ForecastMultiplier').attr("disabled", "disabled")
$('#MinimumOnHandQuantity').attr("disabled", "disabled")
$('#ForecastMultiplier').removeAttr("disabled");
<div class="col-md-6 col-md-offset-3">
<h1>Toggle Field Testing</h1>
@using (Html.BeginForm())
@Html.LabelFor(model => model.UseForecast)
@Html.EditorFor(model => model.UseForecast, new { htmlAttributes = new { @class = "form-control" } })
@Html.LabelFor(model => model.MinimumOnHandQuantity)
@Html.EditorFor(model => model.MinimumOnHandQuantity, new { htmlAttributes = new { @class = "form-control" } })
@Html.LabelFor(model => model.ForecastMultiplier)
@Html.EditorFor(model => model.ForecastMultiplier, new { htmlAttributes = new { @class = "form-control" } })
<button type="button" class="btn btn-success submit">Submit</button>