禁用输入后，如何删除之前插入的文本？

Question

我有两个选项，每个选项显示不同的问题。如果用户在最后一刻决定更改他们的选项。 选项 1 中的任何输入随后将隐藏和显示 选项 2。

但是如果他们在最后一刻决定更改选项，我需要从选项 1 中删除和禁用所有输入文本以继续选项 2。

我尝试用不同的 names/ids 切换输入，并且在它们从选项 1 更改为选项 2 后我尝试禁用它们。但是在完成后发送到他们的电子邮件时它显示了两个选项。

这是禁用选项输入的代码

如果他们选择选项 1，然后选择选项 2，那么选项 1 的所有问题都将被禁用但是它不会删除文本，也不会禁用它。

HTML CODE Option 1 & 2

<select id='dropdown'>
<option value="1">Pet questions</option>
<option value="2">Income questions</option>
</select>

HTML CODE questions & answers to option 1

How many dogs do you have? <input type="text" class="textInput1" />
How many cats do you have? <input type="text" class="textInput1" />
Do you like dogs more or cats? <input type="text" class="textInput1" />

HTML CODE questions & answers to option 2

How many dogs do you have? <input type="text" class="textInput2" />
How many cats do you have? <input type="text" class="textInput2" />
Do you like dogs more or cats? <input type="text" class="textInput2" />

jQuery CODE

$('#dropdown').change(function() {
if( $(this).val() == 1) {
    $('.textInput1').prop( "disabled", false );
} else {       
    $('.textInput1').prop( "disabled", true );
}
if( $(this).val() == 2) {
    $('.textInput2').prop( "disabled", false );
} else {       
    $('.textInput2').prop( "disabled", true );
}
});

我想知道的是，如何在这段代码中添加删除输入文本的选项，同时它已被禁用？

Answer 1

看起来你的代码唯一的问题是 select 的值是一个字符串，所以你需要像这样比较它们：$(this).val() === "1"。请参阅下面的代码片段。

$("#dropdown").on("change", function () {
    if ($(this).val() === "1") {
        // Show the pet questions
        $('.textInput1').prop("disabled", false);
        $('.textInput2').prop("disabled", true);

    } else if ($(this).val() === "2") {
        // Show the income questions
        $('.textInput1').prop("disabled", true);
        $('.textInput2').prop("disabled", false);
    }
});

body {
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 300px;
}

.questions-container {
    display: flex;
    flex-direction: column;
    width: auto;
    margin-top: 10px;
    border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <select id='dropdown'>
    <option value="1">Pet questions</option>
    <option value="2">Income questions</option>
  </select>
</div>

<div id="questions1" class="questions-container">
  How many dogs do you have? <input id="input1-1" type="text" name="input1" class="textInput1" /> 
  How many cats do you have? <input id="input1-2" type="text" name="input1" class="textInput1" /> 
  Do you like dogs more or cats? <input id="input1-3" type="text" class="textInput1" />
</div>
<div id="questions2" class="questions-container">
  How much do you earn a week? <input type="text" class="textInput2" /> 
  How many tax do you pay a week? <input type="text" class="textInput2" /> 
  Do you have a partner with a paying job? <input type="text" class="textInput2" />
</div>

如果用户不需要回答问题，隐藏问题可能也不错。我会等到用户 select 提出一组问题，然后取消隐藏这组问题。见下文：

$("#dropdown").on("change", function () {
    let speed = 200;
    if ($(this).val() === "0") {
        // make both sets of questions enabled to that the user cannot submit the form
        $('.textInput1').prop("disabled", true);
        $('.textInput2').prop("disabled", true);

        // hide the questions
        $("#questions1").slideUp(speed);
        $("#questions2").slideUp(speed);

    }
    if ($(this).val() === "1") {
        // Set only the pet questions to be enabled
        $('.textInput1').prop("disabled", false);
        $('.textInput2').prop("disabled", true);
        console.log(".textInput1 disabled = " + $('.textInput1').prop("disabled"));
        console.log(".textInput2 disabled = " + $('.textInput2').prop("disabled"));

        // unhide the pet questions
        $("#questions1").slideDown(speed);
        $("#questions2").slideUp(speed);

    } else if ($(this).val() === "2") {
        // Show the income questions
        $('.textInput1').prop("disabled", true);
        $('.textInput2').prop("disabled", false);
        console.log(".textInput1 disabled = " + $('.textInput1').prop("disabled"));
        console.log(".textInput2 disabled = " + $('.textInput2').prop("disabled"));

        // unhide the income questions
        $("#questions1").slideUp(speed);
        $("#questions2").slideDown(speed);
    }
});

$(document).ready(function () {
    $("#questions1").hide();
    $("#questions2").hide();
})

body {
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 300px;
}

.questions-container {
    display: flex;
    flex-direction: column;
    width: auto;
    margin-top: 10px;
    border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <select id='dropdown'>
    <option value="0">Select...</option>
    <option value="1">Pet questions</option>
    <option value="2">Income questions</option>
  </select>
</div>

<div id="questions1" class="questions-container">
  <label>How many dogs do you have?</label><input id="input1-1" type="text" name="input1" class="textInput1" />
  <label>How many cats do you have?</label><input id="input1-2" type="text" name="input1" class="textInput1" />
  <label>Do you like dogs more or cats?</label><input id="input1-3" type="text" class="textInput1" />
</div>
<div id="questions2" class="questions-container">
  <label>How much do you earn a week?</label><input type="text" class="textInput2" />
  <label>How many tax do you pay a week?</label><input type="text" class="textInput2" />
  <label>Do you have a partner with a paying job?</label><input type="text" class="textInput2" />
</div>

您还应该像上面一样在问题标签周围添加 <lable> 标签。

禁用输入后，如何删除之前插入的文本？

After input is disable, how do i to remove the text inserted previously?

html

jquery

select

disable