Как включить и отключить элементы ввода на панели вкладок - PullRequest
Новая
       29

Как включить и отключить элементы ввода на панели вкладок

0 голосов
/ 14 июня 2019

Я создал панель вкладок с помощью начальной загрузки, как показано в моем фрагменте кода ниже (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

1 Ответ

1 голос
/ 14 июня 2019

Это работает, как вы и просили, но я снова начал с кода, так как чувствовал, что его можно немного упростить с помощью jquery.

Jquery полностью прокомментирован, но дайте мне знать, если вы неЯ не понял что-то или надеялся на что-то другое.

Я прокомментировал правило CSS display: none;, чтобы вы могли видеть, что другие флажки были отключены.

Надеюсь, это поможет

Демо 

// 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>
...