JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<form action="/SYSTEEM_PARAMETERS/SRView" class="form-horizontal dirtylisten" data-entity="SYSTEEM_PARAMETERS" id="form-Indicatoren1" method="post" novalidate="novalidate"><div class="group-box vertical-group" data-shown="Y" data-shownlabel="N" data-label="">
<div class="control-group" id="ctrl-JN_BUDGET_BEWAKING">
<label class="control-label"></label>
<div class="controls">
<div class="checkbox-help-group"><label class="checkbox"><input checked="checked" class="alt-checkbox" data-chcktype="dutch" id="JN_BUDGET_BEWAKING" type="checkbox"></label><div class="checkbox-help" data-content="Moet het systeem de budgetten bewaken?" data-entity="SYSTEEM_PARAMETERS" data-fieldname="JN_BUDGET_BEWAKING" data-itemtype="fieldhelp" data-placement="left" data-title="Budgetbewaking?" data-toggle="popover">Budgetbewaking?</div></div>
<span class="field-validation-valid help-inline" data-valmsg-for="JN_BUDGET_BEWAKING" data-valmsg-replace="true" style="display: none;"></span>
</div>
</div>
<div class="control-group" id="ctrl-JN_BEPAAL_BUDGET_INDICATOR">
<label class="control-label"></label>
<div class="controls">
<div class="checkbox-help-group"><label class="checkbox"><input checked="checked" class="alt-checkbox" data-chcktype="dutch" id="JN_BEPAAL_BUDGET_INDICATOR" type="checkbox"></label><div class="checkbox-help" data-content="Moet het systeem de budgetindicator bepalen?" data-entity="SYSTEEM_PARAMETERS" data-fieldname="JN_BEPAAL_BUDGET_INDICATOR" data-itemtype="fieldhelp" data-placement="left" data-title="Bepaal budgetindicator?" data-toggle="popover">Bepaal budgetindicator?</div></div>
<span class="field-validation-valid help-inline" data-valmsg-for="JN_BEPAAL_BUDGET_INDICATOR" data-valmsg-replace="true" style="display: none;"></span>
</div>
</div>
<div class="control-group" id="ctrl-JN_BUDGET_VERSCHUIVING">
<label class="control-label"></label>
<div class="controls">
<div class="checkbox-help-group"><label class="checkbox"><input class="alt-checkbox" data-chcktype="dutch"...

CSS

.checkbox{
  background-color:#efefef;
}
.checkbox.checked{
  border:1px solid red;
}

JavaScript

AIT ={};
$form = $('form.form-horizontal');

AIT.handelCheckBoxes = function (form) {

				var $chkboxes = form.find('input[type="checkbox"]');

				$chkboxes.each(function () {

						var $this = $(this);

						$this.on('change', function (event) {

								//form.dirtyForms('setDirty');
								event.preventDefault();
								event.stopImmediatePropagation();

								if ($this.attr("checked") !== 'checked') {
										$this.attr("checked", "checked");
										$this.closest('label.checkbox').addClass('checked');
								} else {
										$this.removeAttr("checked");
										$this.closest('label.checkbox').removeClass('checked');
								}

						});

				});

		},
    
    AIT.handelCheckBoxes2 = function (form) {

				var $chkboxes = form.find('input[type="checkbox"]');

				$chkboxes.on('change', function (e) {
        	e.preventDefault();
					e.stopImmediatePropagation();
        	//form.dirtyForms('setDirty');
							
        
        var $this = $(this);

							

								if ($this.attr("checked") !== 'checked') {
										$this.attr("checked", "checked");
										$this.closest('label.checkbox').addClass('checked');
								} else {
										$this.removeAttr("checked");
										$this.closest('label.checkbox').removeClass('checked');
								}

						});

				

		}
    
    
    AIT.handelCheckBoxes2($form);