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

Question

我使用引导程序创建了一个选项卡窗格，如下面的代码片段(2个选项卡)所示，这两个选项卡都包含多个ul->li->input复选框。如果Tab_01(tab_urban)是活动的，那么允许从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中，当disabled选项卡( Tab_01到Tab_02)不能启用Tab_02的输入复选框并禁用Tab_01时，将禁用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>

​