仅当文本区域为空时才添加值

Question

我正在 WordPress 中构建一个表单，其中包含一个文本区域，该文本区域可能有值也可能没有值，具体取决于客户的输入。为了方便客户使用，我重新设计了一个复选框，以便在切换该复选框时动态隐藏此文本区域字段。它还动态地将标签更改为“指定/未指定”。

我无法弄清楚的该字段的最后一个剩余组件如下：当客户端关闭复选框时AND文本区域中没有现有值，我希望将值输入为“未指定”。相反，如果文本区域中的值精确地“未指定”，则当复选框切换为启用时应清除该值。

我想阻止的是我的客户在文本框中输入一个值，关闭复选框，然后意外地清除他们可能输入的任何内容。同样，如果切换开关已打开，从 UI 角度来看，它不应再显示“未指定”。

这是我的 HTML 代码：

<div class="directorist-custom-field-checkbox">             
                
    <div class="directorist-checkbox directorist-mb-10" id="special-checkbox">
        <input type="checkbox" id="Yes-3727648641" name="special-checkbox[]" value="Yes">
        <label for="Yes-3727648641" class="" id="special-checkbox-label">Special Instructions Specified</label>
    </div>

</div>

<div class="directorist-custom-field-textarea">
    <textarea name="special-textarea" id="special-textarea" class="directorist-form-element" rows="3" placeholder=""></textarea>    
</div>

这是 jQuery：

$(function () {
    $("input[name='special-checkbox[]']").click(function () {
        if ($(this).is(":checked")) {
            $("#special-textarea").hide();                
            $("#special-textarea").val('Not specified');           
            $("label#special-checkbox-label").html("Special Instructions Not Specified");
        } else {
            $("#special-textarea").show();
            $("label#special-checkbox-label").html("Special Instructions Specified");
        }
    });
});

如上所示，当文本区域隐藏时，仅输入“未指定”。如果输入了某些内容然后隐藏了，则会将其替换为“未指定”。到目前为止，我尝试过（没有运气）是在“父”if 语句中嵌套 if ，但是当我发布 .js 文件并运行它时，页面会挂起。是否有一个“更干净”且实际可行的解决方案可以满足我的要求？

附注我使用输入名称而不是 ID 的原因是 WordPress（或主题）每次加载页面时都会动态地将 ID 更改为随机数，因此我必须从元素中获取另一个静态属性。

Answer 1

根据代码，您需要在再次检查后添加清除文本字段的功能。

$(function () {
    $("input[name='special-checkbox[]']").click(function () {
        if ($(this).prop("checked")) {
            $("#special-textarea").hide();                
            $("#special-textarea").val('Not specified');           
            $("label#special-checkbox-label").html("Special Instructions Not Specified");
        } else {
            $("#special-textarea").show();
            $("#special-textarea").val('');
            $("label#special-checkbox-label").html("Special Instructions Specified");
      $("#special-textarea").focus();
        }
        console.log('Textarea => ' + $("#special-textarea").val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="directorist-custom-field-checkbox">             
    <div class="directorist-checkbox directorist-mb-10" id="special-checkbox">
        <input type="checkbox" id="Yes-3727648641" name="special-checkbox[]" value="Yes">
        <label for="Yes-3727648641" class="" id="special-checkbox-label">Special Instructions Specified</label>
    </div>
</div>
<div class="directorist-custom-field-textarea">
    <textarea name="special-textarea" id="special-textarea" class="directorist-form-element" rows="3" placeholder=""></textarea>    
</div>