JSFiddle - React, Tailwind, and code Playground
HTML
<div class="conditionInner">
<div class="conditionContent">
<div class="conditionCheck">
<input type="checkbox" class="conditions" id="condition1" />
<label for="condition1"></label>
</div> <span>I accept the general conditions of likaliner and its partners</span>
</div>
<div class="conditionContent">
<div class="conditionCheck">
<input type="checkbox" class="conditions" id="condition2" />
<label for="condition2"></label>
</div> <span>I accept the transportation conditions of likaliner and its partners</span>
</div>
</div>
<div class="paymentButtonWrap">
<input type="button" class="paymentButton buttonSmall greenButton disabledButton" disabled="disabled" value="Paypal" />
<input type="button" class="paymentButton buttonSmall greenButton disabledButton" disabled="disabled" value="Sms Send" />
</div>
CSS
.greenButton {
background: #a1bd09;
text-shadow: 0px 1px 1px #7f9507;
}
.buttonSmall {
display: inline-block;
height: 25px;
text-transform: uppercase;
border: none;
outline: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: bold;
}
.disabledButton {
background: #FFFFFF !important;
border: 1px solid #DCDCDC !important;
color: #BDBDBD !important;
cursor: default !important;
text-shadow: none !important;
}
JavaScript
$(document).ready(function () {
$(".conditionCheck input[type=checkbox]").click(function () {
var count = 0;
$.each($(".conditionCheck input[type=checkbox]"), function () {
if (this.checked) {
count++;
}
if (count == 2) {
$('button').removeAttr('disabled');
}
});
});
});