Установите нулевое значение для отключенного текстового поля, используя jQuery

Question

У меня есть несколько вопросов относительно того, как установить нулевое значение в отключенное текстовое поле и передать нулевое значение в базу данных, используя jQuery. Прямо сейчас я могу включить или отключить текстовое поле с помощью функции флажка, но не могу понять, как передать нулевое значение, если текстовое поле отключено. Ниже приведен код, который, я думаю, связан с проблемой.

script

<script>
$(document).ready(function () {

    $('#CheckBox1').change(function () {
        $("#TextBox1").prop("disabled", !$(this).is(':checked'));
    });

}); </script>

Класс модели

 [Display(Name = "Login Restriction")]
 public bool isRestrictedIp { get; set; }

 [RegularExpression(@"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$", ErrorMessage = "Invalid IP address format")]
 [Required(ErrorMessage = "This is a mandatory field.")]
 [Display(Name = "Restrict IP Address to")]
 [StringLength(50, ErrorMessage = " The {0} cannot exceed {1} characters.")]
 public string restrictedIp { get; set; }

флажок и код текстового поля

<div class="form-group form-check">
     <label class="form-check-label">
         <input class="form-check-input" asp-for="isRestrictedIp" id="CheckBox1" checked="checked" /> 
          @Html.DisplayNameFor(model => model.isRestrictedIp)
     </label>
</div>

<div class="form-group">
     <label asp-for="restrictedIp" class="control-label"></label>
     <input asp-for="restrictedIp" class="form-control" id="TextBox1" />
     <span asp-validation-for="restrictedIp" class="text-danger"></span>
</div>

Answer 1

Вы не можете отправить отключенный ввод на сервер, поэтому вам нужно использовать такие приемы, как этот.

Просмотр :

Объявление TextBox1_Display ввода для отображения.

 <label asp-for="TextBox1_Display" class="control-label"></label>
 <input asp-for="restrictedIp" class="form-control" id="TextBox1" type="hidden" />   
 <input asp-for="restrictedIp" class="form-control" id="TextBox1_Display" />
 <span asp-validation-for="restrictedIp" class="text-danger"></span>

Jquery

var $TextBox1 = $("#TextBox1");
var $TextBox1_Display = $("#TextBox1_Display");

$('#CheckBox1').change(function () {
    var isChecked = $(this).is(':checked');
    $TextBox1_Display.prop("disabled", !isChecked);
    
    $TextBox1.val(isChecked ? $TextBox1_Display.val() : "");
    
    console.log($("#TextBox1").val());
});

$TextBox1_Display.keyup(function(){
   $TextBox1.val($(this).val());
   console.log($TextBox1.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="form-check-input" asp-for="isRestrictedIp" id="CheckBox1" checked="checked" />

<label asp-for="TextBox1_Display" class="control-label"></label>
 <input asp-for="restrictedIp" class="form-control" id="TextBox1" type="hidden" />   
 <input asp-for="restrictedIp" class="form-control" id="TextBox1_Display" />
 <span asp-validation-for="restrictedIp" class="text-danger"></span>

Редактировать: Добавить AllowEmptyString в класс модели, тогда мы хороши для go.

[RegularExpression(@"^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$", ErrorMessage ="Invalid IP address format")]
[DisplayFormat(ConvertEmptyStringToNull = false)]
[Required(AllowEmptyStrings = true, ErrorMessage = "This is a mandatory field.")]
[Display(Name = "Restrict IP Address to")]
[StringLength(50, ErrorMessage = " The {0} cannot exceed {1} characters.")]
public string restrictedIp { get; set; }