演示

Question

我已经使用引导程序创建了一个选项卡窗格，如下面的代码段所示（2个选项卡），并且都包含多个ul-> li-> input复选框。我试图做的好像Tab_01（tab_urban）是活动的，然后允许从Tab_01而不是Tab_02（tab_rural）->禁用复选框中选择复选框。无法识别我在哪里做错了。

a busy cat

##JS
var el_u = document.getElementById('urban');
var chk_r = document.getElementsByClassName('myCheck_u');

var el_r = document.getElementById('rural');
var chk_u = document.getElementsByClassName('myCheck_r');

if ((hasClass(el_u, 'active')) == true && (hasClass(el_r, 'active')) !== true) {
    console.log('urban selected');
    for (var k = 0; k < chk_r.length; k++) {
        chk_r[k].disabled = false;
    }
    for (var k = 0; k < chk_u.length; k++) {
        chk_u[k].disabled = true;
    }
} else if ((hasClass(el_r, 'active')) == true && (hasClass(el_u, 'active')) !== true) {
    console.log('rural selected');
    for (var k = 0; k < chk_u.length; k++) {
        chk_r[k].disabled = true;
    }
    for (var k = 0; k < chk_r.length; k++) {
        chk_u[k].disabled = false;
    }
}
/*******************************************/
##HTML
<ul class="nav nav-tabs">
    <li id="urban" class="active"><a href="#tab_urban" data-toggle="tab" aria-expanded="true">Tab 1</a></li>
    <li id="rural" class=""><a href="#tab_rural" data-toggle="tab" aria-expanded="false">Tab 2</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab_urban">
        <ul>
            <li>
                <input class="myCheck_u" type="checkbox" name="Wave_fiters[]" value="1"> Wave-1 </li>
            <li>
                <input class="myCheck_u" type="checkbox" name="Wave_fiters[]" value="2"> Wave-2 </li>
        </ul>
    </div>

    <div class="tab-pane" id="tab_rural">
        <ul>
            <li>
                <input class="myCheck_r" type="checkbox" name="HS1_fiters[]" value="1"> Entertainment Sites </li>
            <li>
                <input class="myCheck_r" type="checkbox" name="HS1_fiters[]" value="2"> News </li>
        </ul>
    </div>
</div>

标签正在更改其状态。

最初在Tab_01中可以检查所有输入，而在Tab_02中可以禁用当我更改选项卡（Tab_01至Tab_02）时，未启用输入Tab_02的复选框并禁用Tab_01

Answer 1

这可以按照您的要求进行，但是我再次从代码开始，因为我觉得使用jquery可以简化一点。

jquery已被完全注释，但是如果您不懂或希望其他内容，请告诉我。

我注释掉了display: none; CSS规则，因此您可以看到其他复选框被禁用了。

希望有帮助

演示

// Add click event to tab links
$("a[data-toggle='tab']").click(function() {

  // Remove active classes from tab link and panels
  $("a[data-toggle='tab'].active").removeClass("active");
  $("div.tab-pane.active").removeClass("active");

  // Add active class to the tab link and panel
  $(this).addClass("active");
  $("div.tab-pane" + $(this).attr("href")).addClass("active");

  // Disable all inputs
  $("div.tab-pane input").attr("disabled", "disabled");

  // Enable inputs on the active tab
  $("div.tab-pane.active input").removeAttr("disabled");

});


// Click the link to run function on load
$("#urban > a").click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<ul class="nav nav-tabs">
  <li id="urban" class="active"><a href="#tab_urban" data-toggle="tab" aria-expanded="true">Urban Tab 1</a></li>
  <li id="rural" class=""><a href="#tab_rural" data-toggle="tab" aria-expanded="false">Rural Tab 2</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab_urban">
    <ul>
      <li>
        <input class="myCheck_u" type="checkbox" name="Wave_fiters[]" value="1"> Wave-1 </li>
      <li>
        <input class="myCheck_u" type="checkbox" name="Wave_fiters[]" value="2"> Wave-2 </li>
    </ul>
  </div>

  <div class="tab-pane" id="tab_rural">
    <ul>
      <li>
        <input class="myCheck_r" type="checkbox" name="HS1_fiters[]" value="1"> Entertainment Sites </li>
      <li>
        <input class="myCheck_r" type="checkbox" name="HS1_fiters[]" value="2"> News </li>
    </ul>
  </div>
</div>

如何启用和禁用选项卡窗格输入元素

1 个答案:

演示