javascript - 使用一次后选择下拉列表被禁用

Question

我不得不再次问这个问题，因为我发布的第一个问题不够具体，无法得到答案。

好的，我一直在学习网络开发，目前我是这家公司的一名初级员工，我的任务是修复仍在生产中的网站中的错误。有一个错误我就是想不通。我到处搜索，尝试修补东西，但仍然没有运气。我知道这里有一个类似的问题，但它对我没有帮助。

发生的事情是，当客户从下拉列表中选择一个选项(您有几个 child ？1、2、3 等)时，它会在下拉列表下方的同一页面上弹出更多字段.它产生的字段数量取决于所选的数量。基本上，这样做的目的是生成字段，以便客户可以输入他们拥有的每个 child 的详细信息。

问题:如果客户不小心点击了错误数量的子项，它会生成准确数量的字段，但客户无法返回并更改他们首先在下拉菜单中输入的内容。 下拉菜单似乎在使用一次后自行禁用。

这是我认为创建此代码的两个代码块(我可能是错的)，对于其中的代码量，我深表歉意:

                    <fieldset class="l" style="width:900px;">
                        <label for="children">Which of these statements apply to you?</label>
                        <input type="radio" name="children" value="1" class="r" id="have-children"<?php if($fetch['have_children'] > 0) echo " checked"; ?> /> <span>I have children under the age of 18</span>
                        <input type="radio" name="children" value="0" class="r" id="no-children"<?php if(isset($fetch['have_children']) && $fetch['have_children'] == 0) echo " checked"; ?> /> <span>I do not have children/under the age of 18</span>
                    </fieldset>
                    <div style="clear:both;"></div>
                    <fieldset class="l" style="margin:20px 0 0 15px; display:none;<?php if($fetch['have_children'] > 0) echo " display:block"; ?>" id="number-children">
                        <label for="marital-status">How many children do you have?</label>
                        <select name="children" id="children" class="s">
                            <option value="0" disabled selected>Please select...</option>
                            <option value="1"<?php if($fetch['have_children'] == 1) echo " selected"; ?>>1 child</option>
                            <option value="2"<?php if($fetch['have_children'] == 2) echo " selected"; ?>>2 children</option>
                            <option value="3"<?php if($fetch['have_children'] == 3) echo " selected"; ?>>3 children</option>
                            <option value="4"<?php if($fetch['have_children'] == 4) echo " selected"; ?>>4 children</option>
                            <option value="5"<?php if($fetch['have_children'] == 5) echo " selected"; ?>>5 children</option>
                            <option value="6"<?php if($fetch['have_children'] == 6) echo " selected"; ?>>6 children</option>
                            <option value="7"<?php if($fetch['have_children'] == 7) echo " selected"; ?>>7 children</option>
                            <option value="8"<?php if($fetch['have_children'] == 8) echo " selected"; ?>>8 children</option>
                            <option value="9"<?php if($fetch['have_children'] == 9) echo " selected"; ?>>9 children</option>
                            <option value="10"<?php if($fetch['have_children'] == 10) echo " selected"; ?>>10 children</option>
                        </select>
                    </fieldset>

这是我的代码

就像我说的，我是新手，请耐心等待我:)

    $.fn.duplicate = function(parent, count, cloneEvents) {
for (var i = 0; i < count; i++) {
    parent.append(this.clone(cloneEvents))
}
$('h4.abt', parent).each(function(index) {
    $(this).html('About child ' + (index + 1));
});
}

$(function() {
$('#have-children').click(function() {
    $('#number-children').slideDown('slow');
    $('#next-step').css('display', 'none');
});

$('#example-will').click(function() {
    $('#popup').css('display', 'block');
    $('#overlay').css('display', 'block');
});

$('.close-btn').click(function() {
    $('#popup').css('display', 'none');
    $('#overlay').css('display', 'none');
});


$('#no-children').click(function() {
    $('#next-step').css('display', 'block');
    $('.child-container').css('display', 'none');
    $('#number-children').slideUp('slow');
    //$('#have-children').attr('disabled', 'disabled');
});

$('#children').change(function() {
    var getid = $(this).attr('value');
    $(this).attr('disabled', 'disabled');
    $('#next-step').css('display', 'block');
    $('.child-container').css('display', 'block');

    $('.child-container').duplicate($('#childrens'), getid-1);
});

$('#estate-value').change(function() {
    $("#next-step").css('display', 'block');
});

$('#no-item').click(function() {
    $('#next-step').css('display', 'block');
    $('#reciptype').css('display', 'none');

});

$('#yes-item').click(function() {
    $('#next-step').css('display', 'none');
    $('#reciptype').css('display', 'block');
});

$('#yes-item').click(function() {
    $('#next-step').css('display', 'none');
    $('#reciptype').css('display', 'block');
});

$('#specific-r').click(function() {
    $('#specific-recipient').css('display', 'block');
    $('#new-person').css('display', 'none');
    $('#charity-recipient').css('display', 'none');


});

$('#newperson-r').click(function() {
    $('#specific-recipient').css('display', 'none');
    $('#new-person').css('display', 'block');
    $('#charity-recipient').css('display', 'none');

});

$('#charity-r').click(function() {
    $('#specific-recipient').css('display', 'none');
    $('#new-person').css('display', 'none');
    $('#charity-recipient').css('display', 'block');
});

$('#choose-beneficaries input').click(function() {
    $('#next-step').css('display', 'block');
});

$('#ben-alreadynamed').click(function() {
    $('#specific-recipient').css('display', 'block');
    $('#new-person').css('display', 'none');
});

$('#ben-newperson').click(function() {
    $('#specific-recipient').css('display', 'none');
    $('#next-step').css('display', 'none');
    $('#new-person').css('display', 'block');
});

$('#beneficiary-details select#recipients').change(function() {
    $('#next-step').css('display', 'block');
});

    $('#beneficiary-details select#recipients').change(function() {
    $('#next-step').css('display', 'block');
});

$('#anbe').click(function() {
    $('#selectrec').css('display', 'block');
});

$('#anbe').click(function() {
    $('#selectrec').css('display', 'block');
    $('#new-person').css('display', 'none');
});

$('#npbe').click(function() {
    $('#new-person').css('display', 'block');
    $('#selectrec').css('display', 'none');
});



});

我知道这里有很多代码要处理，但我真的很感激能帮我解决这个问题!

感谢阅读。

Answer 1

好的，禁用 select 框的代码就在您的 javascript 中:

$('#children').change(function() {
    var getid = $(this).attr('value');
    $(this).attr('disabled', 'disabled'); //<-- right here
    $('#next-step').css('display', 'block');
    $('.child-container').css('display', 'block');

    $('.child-container').duplicate($('#childrens'), getid-1);
});

此代码是一个“on change”事件。即一旦select框的值被修改，这个函数就会运行。在此函数中，元素禁用自身(我在上面指向的行)。

现在，由您(或您的上级)决定您想要什么样的行为。例如:您可以删除该行，使其永远不会禁用。

您还可以添加一个“编辑”按钮或其他东西来重新启用它。要重新启用它，只需删除该元素的 disabled 属性。例如:

$('#children').removeAttr("disabled");

---

要修复您在评论中提到的新错误，请尝试以下操作:

$('#children').change(function() {
    var getid = $(this).attr('value');
    $('#next-step').css('display', 'block');
    $('.child-container').css('display', 'block');

    //empty out your #childrens container
    $('#childrens').html("");

    //This is the line that creates your fields.
    $('.child-container').duplicate($('#childrens'), getid-1);
});

好的，所以通过执行 $('#childrens').html(""); 我删除内容，以便您可以从头开始重新创建子字段(使用正确的字段数量)。