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

Question

我使用 bootstrap 创建了一个选项卡窗格，如下面的代码片段（2 个选项卡）所示，并且都包含多个 ul->li->input 复选框。我正在尝试做好像 Tab_01(tab_urban) 处于活动状态然后允许 select 来自 Tab_01 的复选框而不是来自 Tab_02(tab_rural )-> 禁用复选框，反之亦然。无法确定我哪里做错了。

##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>

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

How to enable and disable tab-pane inputs elements

javascript

jquery

tabpanel

twitter-bootstrap-3

演示