使用 JQuery 从表单添加/删除选项卡式数据

Question

我目前正在开发一个客户门户网站，在这个论坛上的人们的帮助下，经过数小时的血汗和泪水，我才走到了下图所示的这一点。

我现在需要完成此表单的最后一步，但我不太确定如何去做。底部有一个选项卡式界面，上面有一个复选框。我想要的是一个系统，用户可以在其中选中和取消选中复选框，并且选项卡会出现和消失，以便他们可以选择一周中的哪几天打开。此代码还需要在表单范围内添加/删除选项卡中的详细信息，这是我正在努力解决的部分。表单的其余部分是使用 JQuery 构建的，因此我希望保持代码的一致性。

我不希望人们在底部提交表单，并且它意外地提交了他们未使用复选框选择的日期信息。

希望有人可以帮助

丹

这是我用来选项卡的代码，我尝试了 JQuery UI，但不喜欢它

$(document).ready(function(){
  $( '.days:not(:first)' ).hide();
  $('#info-nav li').click(function(e) {
  $('.days').hide();
  $('#info-nav .current').removeClass("current");
  $(this).addClass('current');

  var clicked = $(this).find('a:first').attr('href');
  $('#info ' + clicked).fadeIn('fast');
  e.preventDefault();
 }).eq(0).addClass('current');
});

我使用了一段类似于下面的代码来隐藏和显示选项卡时复选框检查过，但它很粗糙并且不起作用，我将它附加到一个隐藏的且在表单范围之外的 div，然后用表单内的 div 来切换它：

$('#info-nav li').hide();
$('#holdingDiv').hide();

if($(':checkbox[name="Monday"]').is(':checked'))
{
    $('#info-nav li a[href="#Monday"]').parents("li").show();
     $('#Monday').appendTo('#info');
}

if($(':checkbox[name="Tuesday"]').is(':checked'))
{
    $('#info-nav li a[href="#Tuesday"]').parents("li").show();
    $('#Tuesday').appendTo('#info');
}

if($(':checkbox[name="Wednesday"]').is(':checked'))
{
    $('#info-nav li a[href="#Wednesday"]').parents("li").show();
$('#Wednesday').appendTo('#info');
}

if($(':checkbox[name="Thursday"]').is(':checked'))
{
    $('#info-nav li a[href="#Thursday"]').parents("li").show();
$('#Thursday').appendTo('#info');
}

if($(':checkbox[name="Friday"]').is(':checked'))
{
    $('#info-nav li a[href="#Friday"]').parents("li").show();
$('#Friday').appendTo('#info');
}

if($(':checkbox[name="Saturday"]').is(':checked'))
{
    $('#info-nav li a[href="#Saturday"]').parents("li").show();

}

if($(':checkbox[name="Sunday"]').is(':checked'))
{
   $('#info-nav li a[href="#Sunday"]').parents("li").show();
       $('#Sunday').appendTo('#info');}                                                 $(':checkbox').click(function()
{
    if($(':checkbox[name="'+ $(this).attr('name') +'"]').is(':checked'))
    {
       $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").show();
       $($(this).val()).appendTo('#info');
   $('#info-nav li a[href="' + $(this).val() + '"]').parents("li").hide();
   $($(this).val()).appendTo('#holdingDiv');
      }
 })

Answer 1

我建议禁用您不想提交的表单字段，并在选择适当的复选框时启用它们：

$('#check-monday').toggle(function () {
    $('#tab-monday :input').attr('disabled', 'disabled');
    // hide the tab
}, function () {
    $('#tab-monday :input').removeAttr('disabled');
    // show the tab
});

提交表单时，禁用的表单元素不会传递到服务器。如果用户重新启用该选项卡，这还有一个优点，即可以将数据保留在表单中。

Answer 2

我认为验证表单传输的数据是您所寻求的，以防止发送错误数据。使用 jQuery 更改选项卡空间的内容，以根据需要添加/删除表单信息。