1

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

好的，所以我一直在学习 Web 开发，我目前是这家公司的一名大三学生，我的任务是修复仍在生产中的网站中的错误。有一个错误，我就是无法理解。我已经到处搜索，尝试修补东西，但仍然没有运气。我知道这里有一个类似的问题，但这对我没有帮助。

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

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

这是我认为创建这个（我可能错了）的两个代码块，为那里的代码量道歉：

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

这是我的js

就像我说我是新手，请尝试对我耐心:)

    $.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');
});



});

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

谢谢阅读。

4

2 回答 2

2

好的，所以禁用您的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("");我删除了内容，以便您可以从头开始重新创建子字段（使用适量的字段）。

于 2013-04-12T09:07:44.817 回答
0

尝试从中删除$(this).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);
});
于 2013-04-12T09:14:38.867 回答