2

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

替代文字

我现在需要完成此表格的最后一步，但我不太确定如何去做。底部有一个选项卡式界面，其上方是复选框。我想要的是一个系统，用户可以在其中选中和取消选中复选框，并且选项卡会出现和消失，这样他们就可以选择一周中的哪几天打开。此代码还需要在表单范围内添加/删除选项卡中的详细信息，这是我正在努力解决的部分。表单的其余部分是使用 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');
      }
 })
4

2 回答 2

1

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

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

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

于 2010-12-21T17:01:01.230 回答
0

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

于 2010-12-21T16:55:52.423 回答