Question

我有两个选项分别显示不同的问题。如果用户决定在最后一分钟更改其选项。 选项1 中的所有输入都会隐藏并显示选项2 。

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

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

这是用于禁用选项输入的代码

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

HTML代码选项1和2

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

HTML CODE问题和选项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选项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代码

$('#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>

如果用户不需要回答问题，则隐藏问题也可能会很好。我将等到用户选择一组问题，然后再取消隐藏该组问题。见下文：

$("#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>标签。

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

1 个答案: