SO Fiddle - Checkbox
HTML
<table id="myTable">
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
</table>
<p id="hello">
<button id="compare" type="button">Compare</button>
</p>
<p id="error">Select more than one to compare</p>
CSS
#hello, #error {
display:none;
}
table tr td {
border:1px solid #ddd;
}
JavaScript
$(function () {
var tb = $("#myTable")
tb.find("input:checkbox").filter(':has(:checkbox:checked)').end().click(function () {
var bol = tb.find("input:checkbox:checked");
if (bol.length <= 3) {
$('#error').hide();
$('#hello').fadeIn();
} else if (bol.length >= 4) {
tb.find("input:checkbox").not(":checked").attr("disabled", bol);
} else {
$('#hello').hide();
}
if (bol.length < 4) {
tb.find("input:checkbox").not(":checked").attr("disabled", false);
}
if (bol.length <= 1) {
$('#error').show();
$('#compare').hide();
}
if (bol.length > 1) {
$('#compare').show();
}
});
$('#compare').click(function () {
var ck = tb.find("input:checkbox:checked");
if (ck.length === 1) {
$('#error').show();
}
});
});