JSFiddle - React, Tailwind, and code Playground
HTML
<form name="phpmailerServerSettings" method="POST" action="" role="form">
<div id="form-inputServer" class="form-group">
<label for="inputServer">Mailudbyder</label>
<input type="text" name="inputServer" class="form-control" value="smtp.example.com">
</div>
<label for="mail_auth">Min server kræver godkendelse</label>
<input type="checkbox" name="mail_auth" id="auth_mail" class="form-control " value="auth_yes" onchange="mail_auth_check()">
<div id="form-inputUsername" class="form-group">
<label for="inputUsername">Brugernavn</label>
<input type="text" name="inputUsername" id="inputUsername" class="form-control" value="[email protected]">
</div>
<div id="form-inputPassword" class="form-group">
<label for="inputPassword">Adgangskode</label>
<input type="password" name="inputPassword" id="inputPassword" class="form-control" value="password1234">
</div>
<div id="form-inputSendFromName" class="form-group">
<label for="inputSendFromName">Navn</label>
<input type="text" name="inputSendFromName" class="form-control " value="Website navn">
</div>
<div id="form-inputSendFromAddress" class="form-group">
<label for="inputSendFromAddress">Send fra adresse</label>
<input type="text" name="inputSendFromAddress" class="form-control" value="[email protected]">
</div>
<div id="form-inputSSL" class="form-group">
<label for="inputSSL">Min server kræver SSL kryptering</label>
<select name="inputSSL" multiple required>
<option value="ssl">Ja (SSL)</option>
<option value="tls">Ja (TLS)</option>
<option value="no" selected="">Nej</option>
</select>
</div>
<div id="form-element-actions" class="form-group">
<button name="phpmailerServerSettings" type="submit" class="btn btn-rad btn-primary">Gem indstillinger</button>
</div>
</form>
JavaScript
$(function(){
$("#inputUsername, #inputPassword").attr("disabled", 1);
$("#auth_mail").change(function(){
if($(this).is(':checked')) {
$("#inputUsername, #inputPassword").removeAttr("disabled");
} else {
$("#inputUsername, #inputPassword").attr("disabled", 1);
}
});
});