The checkbox you see below is nothing but the label and its input that is hidden or making its opacity to "zero" reason for doing this is, it has very less CSS styling property that will not satisfied user's requirement, Image based styling has great flexibility in appearance. In this blog, I used three images for explaining the different checkbox. These properties will support in every browser.
Here I have used three types of a checkbox for showing reserved Seat, Select Seat and Empty Seat, as you can see in the below-attached screenshot in which I used simple input box with span and label. For reserved seat checkbox, I used a property as "checked and disabled" to it, when a user clicks on this checkboxjQuery pop-up will remind you that this seat is reserved, like that for selected and empty, "selected class" property will be add and remove through jquery function.