-1

我有两个选项，每个选项显示不同的问题。如果用户决定在最后一刻更改他们的选项。选项 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>

选项 1 的 HTML 代码问题和答案

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" />

选项 2 的 HTML 代码问题和答案

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 );
}
});

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

4

1 回答 1

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>在上面的问题标签周围添加标签。

于 2019-05-03T02:12:54.900 回答