jquery - 如何提交正确的 div 元素(而不是隐藏的 div)？

Question

我有以下代码工作正常，但问题是它总是提交第一个 div (文章)，即使它是隐藏的。我的问题是如何提交表单以及显示的 div 中表单中的元素？ (如果我选择音乐单选按钮，我想提交音乐 Div 的输入元素而不是文章 div。谢谢。

$(document).ready(function(){ 
    $("input[name$='itemlist']").click(function() {
        var selection = $(this).val();
        $("div.box").hide();
        $("#"+selection).show();
    });
});

 <!--radio buttons-->
 <div id="articleselection"><input name="itemlist" type="radio" value="article" /> Article/Book </div>
 <div id="musicselection"><input name="itemlist" type="radio" value="music" /> Music</div>


 <!--article div starts-->
 <div id="article" class="box">
 <table class="fieldgroup">
 <tr><td>Journal Title: <input id="JournalTitle" name="JournalTitle" type="text" size="60" class="f-name" tabindex="1" value="JournalTitle">
 </table>

 <table class="fieldgroup">
 <tr><td>Article Author: <input id="ArticleAuthor" name="ArticleAuthor" type="text" size="40" class="f-name" tabindex="2" value="<"ArticleAuthor"></td></tr>
 </table>
 </div>

 <!--music div starts-->
 <div id="music" class="box">
 <table class="fieldgroup">
 <tr><td>Music Title: <input id="Music Title" name="Music Title" type="text" size="60" class="f-name" tabindex="1" value="Music Title">
 </table>

 <table class="fieldgroup">
 <tr><td> Music Author: <input id="MusicAuthor" name="Music Author" type="text" size="40" class="f-name" tabindex="2" value="<"MusicAuthor"></td></tr>
 </table>
 </div>                 

Answer 1

禁用隐藏的 div 框中的输入元素。当输入被禁用时，它们不会出现在帖子中。

$(document).ready(function(){  
    $("input[name$='itemlist']").click(function() { 
        var selection = $(this).val(); 
        $("div.box").hide(); 
        $("input, select, textarea", $("div.box")).attr("disabled", true);
        $("#"+selection).show(); 
        $("input, select, textarea", $("#"+selection)).attr("disabled", false);
    });