在 jquery 中解锁输入时删除错误文本

Question

我有一个带有选择、输入的表单，以及一个在选择选项时锁定我的输入的函数。

我添加了一条警告，表明当有人选择某个选项时输入会被锁定。我想添加一个函数，当有人选择带有 value="" 的选项时删除此警告。

它正在删除我的警告，但例如，当我选择选项文本 1 然后选择文本 2 时，我的警告会显示两次，然后当我选择第一个选项的选项时，它会删除警告，但仅删除第一个。

如何更改它，使警告仅显示一次，而不是多次，并在首先选择选项后将其删除。

$(function() {
  $('#stato').change(function() {
    var value = $(this).val(); //Pobranie wartości z tego selecta
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
      $("#error").remove();
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
  <label>Enabled </label>
  <select name="stato" id="stato" class="form-control">
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div class="col-4">
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>

Answer 1

我的警告显示两次

您没有检查它是否已经存在或将其删除。

仅先删除

ID 必须是唯一的，因此 $("#error").remove(); 将仅删除第一个 ID。使用类而不是 ID 来删除多个元素。如果只添加一次，这不会是问题；只是解释为什么它只删除第一个。

正如另一个答案中所述，最好的解决方案是简单地 .show()/.hide()，所以我不会在这里重复。

要更新代码，您始终可以删除错误，然后根据需要将其添加回来 - 如上所述，这不是最有效的。

更新的片段：

$(function() {
  $('#stato').change(function() {
    var value = $(this).val(); //Pobranie wartości z tego selecta
    
    // always remove any existing error
    $("#error").remove();
    
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
  <label>Enabled </label>
  <select name="stato" id="stato" class="form-control">
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div class="col-4">
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
</div>

另请注意，由于它使用 ID，因此只能用于单个错误消息。

Answer 2

实现您所需的简单方法是让通知 div 始终包含在 DOM 中，但隐藏，然后根据 select 的状态隐藏/显示它， 像这样：

jQuery(function($) {
  $('#stato').change(function() {
    var value = $(this).val();
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
      $("#error").hide();
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#error').show();
    }
  });
});

#error {
  color: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="col-4">
  <label>Enabled </label>
  <select name="stato" id="stato" class="form-control">
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div class="col-4">
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" />
  <div id="error">Input locked</div>
</div>