Checkboxes do not work in my custom made module - dotnetnuke

Question

I have a site made in ASP.NET which I turned into a DotNetNuke module. But now when I try to check the checkboxes it doesn't work.

Answer 1

add the class "normalCheckBox" to your checkbox and DNN will ignore it. ej:
<input type="checkbox" class="normalCheckBox">

Answer 2

The nice people who made DotNetNuke have a special kind of humor. It turns out that checkboxes used on my site are hidden by DotNetNuke and replaced by an image of a checkbox. The reason behind this is unclear to me.
Just take a look at the HTML:
<label style="display: inline-block;">
<input type="checkbox" id="copyAllSettingsCheckBox" name="copyallcheckbox" title="Copy all settings" style="position: absolute; z-index: -1; visibility: hidden;">
<span class="dnnCheckbox">
<span class="mark">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAAAAAApWe5zwAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=">
</span>
</span>
Include any additional settings.
</label>
To fix this I used the code shown below. This effectively cleans up the stuff added by DotNetNuke. Just put it at the end of your javascript.
$('.dnnCheckbox').remove();
$(':checkbox').removeAttr('style');

Answer 3

I'm having similar problems.
In my case I am using a dialog/popup, and the cause of the checkbox not working seems to be the z-index being -1 (negative one).
HOWEVER it seems that the z-index of the checkbox isn't always set to -1.
For example, as I have mine in a dialog (popup) box, initially the z-index is set to -1 (which seems to work).
When I open the dialog with a button click, the z-index is set to 1001 (which also, seems to work).
However with the checkbox contained in an update panel, the postback renders the checkbox's z-index back to -1 (which doesn't work, as the checkbox is underneath the dialog box).
In conclusion - check if z-index of the element containing the checkbox (recursively) is greater than the checkbox z-index, as this might be the cause of it not working (elements without a z-index seem to work with the checkbox fine).
Bit of a hacky fix:
I added some jQuery onload to bring checkbox's z-index above it's parent (in this case the jQuery dialog)
This will get all the inputs with a z-index of -1 within the parent element, and set their z-index 1 above the parent
//the id being the parent element that has the higher z-index
function FixInputZIndex(id){
var element = $('#' + id);
$('#' + id + ' input').filter(function () { return $(this).css('z-index') < 0; }).css('z-index', element.css('z-index') + 1);
}