一次使用後選擇下拉被禁用

Question

我不得不再次提出這個問題，因爲我發佈的第一個問題不夠具體，無法得到答案。

好的，我一直在學習關於網絡開發的知識，我目前是這家公司的大三學生，我的任務是修復仍在生產的網站中的錯誤。有一個錯誤我只是無法讓我的頭轉過來。我搜遍了所有東西，嘗試着修補東西，但仍然沒有運氣。我知道這裏有類似的問題，但它並沒有幫助我。

發生了什麼是，當客戶從下拉列表中選擇一個選項時（您有多少個孩子？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'); 
}); 



}); 

據我所知，有很多的代碼的地獄都要經過這裏，但我真的很感激，在解決這個一些幫助！

感謝您的閱讀。

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

此代碼是一個「關於改變」事件。一旦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("");我刪除的內容，這樣就可以重新 - 從頭開始​​創建子字段（使用正確數量的字段）。

Answer 2

嘗試從去除$(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); 
});