JSFiddle - React, Tailwind, and code Playground
HTML
<label><input name="other_1" type="radio" value="6" id="3d">cate 3</label><br />
<label><input name="other_1" type="radio" value="4" id="2d">cate 2</label><br />
<label><input name="other_1" type="radio" value="2" id="1d">cate 1</label><br />
<hr />
<label><input name="other_2" type="checkbox" id="other_2" value="1">option 1</label><br />
<label><input name="other_3" type="checkbox" id="other_3" value="2">option 2</label><br />
<label><input name="other_4" type="checkbox" id="other_4" value="3">option 3</label><br />
<label><input name="other_5" type="checkbox" id="other_5" value="4">option 4</label><br />
<label><input name="other_6" type="checkbox" id="other_6" value="5">option 5</label><br />
<label><input name="other_7" type="checkbox" id="other_7" value="6">option 6</label><br />
<label><input name="other_8" type="checkbox" id="other_8" value="7">option 7</label><br />
JavaScript
$('input[type="checkbox"]').click(function () {
var pass = parseInt($('input[name="other_1"]:checked').val(), 10) //1,2,3
var days = $('input[type="checkbox"]:checked').length;
console.log(days, pass);
if (days == pass) {
$('input[type="checkbox"]').not(':checked').prop('disabled', true);
}
})
$('input[name="r_1"]').change(function () {
$('input[type="checkbox"]').prop({
'checked': false,
'disabled': false
});
if (parseInt($(this).val(), 10) == 3) $('input[type="checkbox"]').prop({
'checked': false,
'disabled': false
});
});