JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<div id="applicant-info">
<legend>Employment Information</legend>
<div class="control-group">
<label class="control-label" for="">
Company Name
</label>
<div class="controls">
<input id="name_of_employer" name="name_of_employer" type="text">
<div class="css-checkbox inline">
<input id="self_employed" name="self_employed" type="checkbox" value="true">
<label for="self_employed">
Self Employed
</label>
</div>
<div class="css-checkbox inline">
<input id="checkbox-house-wife" type="checkbox">
<label for="checkbox-house-wife">
Housewife
</label>
</div>
</div>
</div>
<div class="control-group disable-housewife">
<label class="control-label" for="">
Office Address
</label>
<div class="controls">
<textarea rows="5"></textarea>
</div>
</div>
<div class="control-group disable-housewife">
<label class="control-label" for="">
Office phone number
</label>
<div class="controls">
<input id="work_phone" name="work_phone" type="text">
</div>
</div>
<div class="control-group disable-housewife">
<label class="control-label" for="">
Basic monthly income
</label>
<div class="controls">
<input id="monthly_income" name="monthly_income" type="text">
</div>
</div>
<div class="control-group disable-housewife">
<label class="control-label" for="">
Nature of business
</label>
<div class="controls">
<div class="custom-select">
<select id="business_nature" name="business_nature">
<option value="85">Accounting</option>
<option value="86">Advertising / Marketing</option>
<option value="87">Airlines</option>
</select>
...
SCSS
input, textarea, select {
width: 99%;
display: block
}
.css-checkbox, .css-radio {
&.inline {
display: inline-block;
& + & {
margin-left: 50px;
}
}
&.multiline-en, &.multiline-en-tc {
input[type=checkbox] + label,
input[type=radio] + label {
min-height: 40px;
line-height: 1.2;
}
}
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-size: 40px 450px;
background-image: url('https://s3.amazonaws.com/f.cl.ly/items/373h3u0T133v131q3c3P/sprite-custom-form.png');
}
input[type="checkbox"],
input[type="radio"] {
border: 0;
padding: 0;
width: 1px;
height: 1px;
margin: -1px;
left: -1000px;
z-index: -9999;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
}
input[type=checkbox] + label,
input[type=radio] + label {
color: #666;
width: auto;
display: inline-block;
cursor:pointer;
font-size: 16px;
line-height: 40px;
padding-left: 50px;
position: relative;
margin: 10px 0px 0px;
vertical-align: middle;
background-repeat: no-repeat;
}
input[type="checkbox"] + label {
background-position: 0 0;
}
input[type="checkbox"]:checked + label {
background-position: 0 -50px;
}
input[type="checkbox"][disabled] + label {
cursor: not-allowed;
background-position: 0 -100px;
}
input[type="checkbox"]:checked[disabled] + label {
cursor: not-allowed;
background-position: 0 -150px;
}
input[type="radio"] + label {
background-position: 0 -200px;
}
input[type="radio"]:checked + label {
background-position: 0 -250px;
}
input[type="radio"][disabled] + label {
cursor: not-allowed;
background-position: 0 -300px;
}
}
JavaScript
$(function() {
$('#checkbox-house-wife').change(function() {
if (this.checked) {
$('.disable-housewife input, .disable-housewife textarea, .disable-housewife select, .disable-housewife radio').prop('disabled', true);
} else {
$('.disable-housewife input, .disable-housewife textarea, .disable-housewife select, .disable-housewife radio').prop('disabled', false);
}
});
});