JSFiddle - React, Tailwind, and code Playground
HTML
<select name="role" id="role">
<option value="admin" selected>Administrateur</option>
<option value="sei">Superviseur</option>
</select>
<input type="checkbox" name="gestionPostes" value="false"/>
<input type="checkbox" name="gestionAppsMetiers" value="false"/>
<input type="checkbox" name="gestionAlertes" value="false"/>
<input type="checkbox" name="gestionSupervision2" class="gestionSupervision2" value="false" disabled />
<input type="checkbox" name="stats" value="false"/>
<input type="hidden" name="gestionSupervision" class="gestionSupervision" value="false"/>
JavaScript
$("#role").change(function () {
$(".gestionSupervision2").prop('disabled', false);
$("input[type='checkbox']").prop('checked', $(this).find('option[value="admin"]').is(':selected'));
$(".gestionSupervision2").prop('disabled', true);
$(".gestionSupervision").prop('checked', $(this).find('option[value="admin"]').is(':selected'));
}).change();
$("input[type='checkbox']").change(function () {
if ($("input[name='gestionPostes']").attr("checked") && $("input[name='gestionAlertes']").attr("checked") && $("input[name='gestionSupervision']").attr("checked") && $("input[name='stats']").attr("checked") &&
$("input[name='gestionAppsMetiers']").attr("checked")) {
$(".gestionSupervision2").prop('disabled', false);
$(".gestionSupervision2").prop('checked', true);
$(".gestionSupervision2").prop('value', 'true');
$(".gestionSupervision2").prop('disabled', true);
$(".gestionSupervision").prop('checked', true);
$(".gestionSupervision").prop('value', 'true');
} else {
$(".gestionSupervision2").prop('disabled', false);
$(".gestionSupervision2").prop('checked', false);
$(".gestionSupervision2").prop('disabled', true);
$(".gestionSupervision").prop('checked', false);
$(this).prop('value', 'true');
$("#role").val('sei');
}
});