How to Post/Submit an Input Checkbox That Is Disabled

How to post checkbox value when disabled

You've already the hidden input :

@Html.HiddenFor(m=>m.In,new { id = "hiddenIn" })

That should pass the value of disabled checkbox.

Solution without hidden input, you could remove the disabled attribute before getting the elements values from the form :

$("input:checkbox").prop('disabled', false);
//Then get the data
var serializedForm = $("input,select").serialize();

Hope this helps.

disabled checked checkbox is not being sent to model on form submit

On form submit you need to enable checkbox first

$(form).submit(){
         $('.verification5').removeAttr('disabled');
}

Or instead of using disabled property you can also use readonly property as readOnly property can be sent to server on form submit.

how to send disabled checkbox value into database

try this

<input type="checkbox" onclick="this.checked=this.defaultChecked" /><input type="checkbox" checked onclick="this.checked=this.defaultChecked" />

How to disable form submit button until all input fields are filled in ReactJS?

For the checkbox you have to change from value prop to the checked prop and access event.target.checked instead i.e

 <input type="checkbox" checked={checkbox} onChange={(e) => setCheckbox(e.target.checked)} />

The react docs have an example too

Enable submit button when the input fields are not empty and the checkbox checked

For enhanced UX, let's say the user checked the checkbox before filling the input fields. In this corner case, the user has to click elsewhere for the submit button to be activated. That's why the keyup function should be present.

The following code should be sufficient

// Enabling the register button only when the register fields are not empty
$(document).ready(() => {
  $("input[type=text]").keyup(onFormUpdate);
  $("input[type=password]").keyup(onFormUpdate);
  $("input[type=checkbox]").change(onFormUpdate);
})

function onFormUpdate() {
  const registerUsername = $("#registerUsername").val();
  const registerPassword = $("#registerPassword").val();
  const acceptedTnC = $("#registerCheck").prop('checked');

  if (registerUsername && registerPassword && acceptedTnC) {
    $("#register").removeAttr("disabled");
  } else {
    $("#register").attr("disabled", "disabled");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" onchange="onFormUpdate()">

  <!-- username input -->
  <div class="form-outline mb-4 register">
    <input type="text" id="registerUsername" class="form-control" />
    <label class="form-label" for="registerUsername">Username</label>
  </div>

  <!-- Password input -->
  <div class="form-outline mb-4 register">
    <input type="password" id="registerPassword" class="form-control" />
    <label class="form-label" for="registerPassword">Password</label>
  </div>

  <!-- Checkbox -->
  <div class="form-check d-flex justify-content-center mb-4">
    <input class="form-check-input me-2" type="checkbox" value="" id="registerCheck" aria-describedby="registerCheckHelpText" />
    <label class="form-check-label" for="registerCheck">
    I have read and agree to the terms
  </label>
  </div>

  <!-- Submit button -->
  <button type="submit" id="register" disabled="disabled" class="btn btn-dark btn-block mb-3">Register</button>

</form>