javascript - 每次点击保存时将所有内容设置为默认值的 jQuery 代码

Question

我有一个带有复选框的表单；当我选中此复选框时，它会禁用另一种形式，即替代联系形式并将值设置为第一种形式 主要联系人到备用联系人。但是，当我取消选中它时删除“禁用” 并将替代形式的值设置为默认值。我的代码(我在下面提供)遇到的问题是每次我点击保存并且未选中该复选框时。它将插入的值设置为默认值，即空字符串。

$(".AlternativeContactFields").removeAttr("disabled");
$(".AlternativeContactFields").each(function (index, element) {
  if ($(element).is("input")) {
    $(element).val("");
  } else if ($(element).is("select")) {
    $(element).val(1);
  }
});

我该如何解决这个问题？

Answer 1

我想这就是你想要的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#save').click(function() {
    $(".AlternativeContactFields").removeAttr("disabled");
    $(".AlternativeContactFields").each(function (index, element) {
      if ($(element).is("input")) {
        // read the type attribute.
        var type = $(element).attr('type');
        switch(type) {
          case 'checkbox':
          case 'radio':
            // uncheck box
            $(element).prop('checked', false);
            break;
          case 'text':
          default:
            $(element).val("");
            break;
        }  
      } else if ($(element).is("select")) {
        $(element).val(1);
      }
    });
  });
});
</script>
<input type="button" value="Save" id="save"/><br/>
<input disabled="disabled" type="checkbox" checked="checked" value="My checkbox 1" class="AlternativeContactFields"/>My checkbox 1<br/>
<input disabled="disabled" type="checkbox" value="My checkbox 2" class="AlternativeContactFields"/>My checkbox 2<br/>
<input disabled="disabled" type="text" value="My textbox value 1" class="AlternativeContactFields"/><br/>
<input disabled="disabled" type="text" value="My textbox value 2" class="AlternativeContactFields"/><br/>
<select disabled="disabled" class="AlternativeContactFields">
  <option value="0">my Option 0</option>
  <option value="1">my Option 1</option>
  <option value="2">my Option 2</option>
</select>