如何将选项卡设置为禁用/启用

Question

我有一个任务来禁用和启用选项卡点击复选框。但在我的第一个选项卡中，我有两个filds名称和年龄。第二个选项卡仅在第一个选项卡验证完成后才启用。我可以通过选中复选框来显示选项卡，但不应启用。如何才能执行此操作？ 我的HTML代码

<div id="tabs"> 
     <ul> 
      <li><a href="#tabs-0">Tab1</a> 
      </li> 
      <li><a href="#tabs-1">Tab2</a> 

      </li> 
      <li><a href="#tabs-2">Tab3</a> 

      </li> 
      <li><a href="#tabs-3">Tab4</a> 

      </li> 
     </ul> 
     <div id="tabs-0"> <b>Name</b> 

      <input type="text" id="name" /> 
      <br/> <b>Age</b> 
      <input type="text" id="age" /> 
      <br/> 
    <input type="checkbox" name="tabs-0" value="0" checked>tabs-1 
    <input type="checkbox" name="tabs-1" value="1" disabled>tabs-2 
    <input type="checkbox" name="tabs-2" value="2" disabled>tabs-3 
    <input type="checkbox" name="tabs-3" value="3" disabled>tabs-4 

      <input type="submit" value="next" class="submit" /> 
     </div> 
     <div id="tabs-1"> <b>city</b> 

      <input type="text" id="name" /> 
      <br/> <b>state</b> 

      <input type="text" id="age" /> 
      <br/> 
      <input type="submit" value="next" class="submit" /> 
     </div> 
     <div id="tabs-2"> 
      <p>Tab3</p> 
     </div> 
     <div id="tabs-3"> 
      <p>Tab4</p> 
     </div> 

    </div> 

的Javascript

$(function() { 
    $("#tabs").tabs(); 
    $("#tabs").tabs("option", { 
     "selected": 0, 
      "disabled": [1, 2, 3] 
    }); 

    $('.submit').click(function() { 
     if($('#name').val()=='') 
     { 
      alert("empty"); 
     } 
     else 
     { 
     var nexttab = parseInt($(this).parent().next().attr('id').match(/\d+/g), 10); 
     $('#tabs').tabs("enable", nexttab).tabs("select", nexttab); 
     $('input[name="tabs-'+nexttab+'"]').removeAttr('disabled').prop('checked', true); 
     } 
    }); 


    $("input[type=checkbox]").click(function() { 
     if ($(this).is(':checked')) { 
      $('#tabs').tabs("enable", $(this).val()); 
      $('#tabs').tabs("select", $(this).val()-1); 
     } else { 
      $('#tabs').tabs("disable", $(this).val()); 
      var tab = $(this); 
      $(":checked").each(function (index) { 
       $('#tabs').tabs("select", $(this).val()); 
      }); 
     } 
    }); 
}); 

你可以看到DEMO

Answer 1

按我的理解。试试这个

<input type="checkbox" name="tabs-1" value="1" checked>tabs-2 
<input type="checkbox" name="tabs-2" value="2" checked>tabs-3 
<input type="checkbox" name="tabs-3" value="3" checked>tabs-4 

而不是

<input type="checkbox" name="tabs-1" value="1" disabled>tabs-2 
<input type="checkbox" name="tabs-2" value="2" disabled>tabs-3 
<input type="checkbox" name="tabs-3" value="3" disabled>tabs-4 

删除CSS

.ui-state-disabled { 
display: none; 
} 

JS变化

$("#tabs").tabs("option", { 
    "selected": 0    
}); 

Demo