Включение / отключение опций с помощью JQuery при использовании bootstrap-select - PullRequest
Новая
       65

Включение / отключение опций с помощью JQuery при использовании bootstrap-select

0 голосов
/ 05 мая 2019

Когда input -> опция d пуста, опция -> d должна быть отключена.(Это так)

Как только input -> опция d имеет какое-то значение, опция -> d должна быть включена.(Это не ) 

$(document).ready(function() {
  if (!$('#option_d').val()) {
    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }

});

$("#option_d, #option_e").on("change keyup paste", function() {
  if (!$('#option_d').val()) {
    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  } else {
    $("#right_option option[value='D']").removeAttr('disabled');
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled');
  } else {
    $("#right_option option[value='E']").removeAttr('disabled');
  }

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">


<table>
  <tr>
    <td><label class="control-label">Option (A)</label></td>
    <td><input class="form-control" type="text" name="option_a" placeholder="Option (A)" required /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (B)</label></td>
    <td><input class="form-control" type="text" name="option_b" placeholder="Option (B)" required /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (C)</label></td>
    <td><input class="form-control" type="text" name="option_c" placeholder="Option (C)" required /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (D)</label></td>
    <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (E)</label></td>
    <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Right Answer</label></td>
    <td>
      <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required>
        <option value="" selected disabled hidden>Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D">Option D</option>
        <option value="E" data-tokens="Option E">Option E</option>
      </select>
    </td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>

Когда input -> опция d пуста * опция 1023 * -> d должна быть отключена.(Это так)

Как только input -> опция d имеет какое-то значение, опция -> d должна быть включена.(Это не )

Это прекрасно работает, когда я не использую никакой начальной загрузки. JSFiddle

1 Ответ

2 голосов
/ 06 мая 2019

Когда вы используете bootstrap-select ваш код изменяется с: 

<td>
      <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required>
        <option value="" selected disabled hidden>Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D">Option D</option>
        <option value="E" data-tokens="Option E">Option E</option>
      </select>
    </td>

до: 

<td>
  <div class="dropdown bootstrap-select form-control show">
    <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required="" tabindex="-98">
        <option value="" selected="" disabled="" hidden="">Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D" disabled="disabled">Option D</option>
        <option value="E" data-tokens="Option E" disabled="disabled">Option E</option>
      </select>
    <button type="button" class="btn dropdown-toggle btn-light bs-placeholder" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="true" data-id="right_option" title="Select Quiz">
      <div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Select Quiz</div></div> </div></button>
    <div class="dropdown-menu show" x-placement="bottom-start" style="max-height: 554px; overflow: hidden; min-height: 162px; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
      <div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off" role="combobox" aria-label="Search" aria-controls="bs-select-1" aria-autocomplete="list"></div>
      <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1" style="max-height: 490px; overflow-y: auto; min-height: 98px;">
        <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
          <li><a role="option" class="dropdown-item" id="bs-select-1-0" tabindex="0"><span class="text">Option A</span></a></li>
          <li><a role="option" class="dropdown-item" id="bs-select-1-1" tabindex="0"><span class="text">Option B</span></a></li>
          <li><a role="option" class="dropdown-item" id="bs-select-1-2" tabindex="0"><span class="text">Option C</span></a></li>
          <li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-3" aria-disabled="true" tabindex="-1"><span class="text">Option D</span></a></li>
          <li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-4" aria-disabled="true" tabindex="-1"><span class="text">Option E</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</td>

Это означает, что пользователь видит неупорядоченный список вместо , выберите опцию , поэтому нам также нужно изменить класс и атрибуты в неупорядоченном списке .

Теперь, если вы печатаете что-то в варианте D , вам нужно удалить все атрибуты disabled class, aria-disable и изменить значение tabindex на 0 в: 

<li class="disabled"><a role="option" class="dropdown-item disabled" id="bs-select-1-3" aria-disabled="true" tabindex="-1"><span class="text">Option D</span></a></li>


$(document).ready(function() {
  if (!$('#option_d').val()) {
    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }


  $("#option_d, #option_e").on("change keyup paste", function() {
    if (!$('#option_d').val()) {

      $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
    } else {
      $("#right_option option[value='D']").removeAttr('disabled');
      $("#bs-select-1-3").removeAttr('aria-disabled');
      $("#bs-select-1-3").removeClass('disabled');
      $("#bs-select-1-3").attr('tabindex', '0');
      $("#bs-select-1-3").parent().removeClass('disabled');
    }
    if (!$('#option_e').val()) {
      $("#right_option option[value='E']").attr('disabled', 'disabled');
    } else {
      $("#right_option option[value='E']").removeAttr('disabled');
    }

  });

});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">


<table>
  <tr>
    <td><label class="control-label">Option (D)</label></td>
    <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (E)</label></td>
    <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Right Answer</label></td>
    <td>
      <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required>
        <option value="" selected disabled hidden>Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D">Option D</option>
        <option value="E" data-tokens="Option E">Option E</option>
      </select>
    </td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>

В приведенном выше фрагменте он изменяется, как мы и ожидаем, , но снова выходит на первый этап, когда мы нажимаем кнопку, чтобы выбрать параметр. Для этого мы также сделаем то же самое при нажатии кнопки. 

$("[aria-owns='bs-select-1']").click(function(){
        if (!$('#option_d').val()) {

    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  } else {
  $("#right_option option[value='D']").removeAttr('disabled');
    $("#bs-select-1-3").removeAttr('aria-disabled');
    $("#bs-select-1-3").removeClass('disabled');
    $("#bs-select-1-3").attr('tabindex','0');
    $("#bs-select-1-3").parent().removeClass('disabled');
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled');
  } else {
    $("#right_option option[value='E']").removeAttr('disabled');
  }
    });

Окончательный рабочий код: 

$(document).ready(function() {
  if (!$('#option_d').val()) {
    $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }
  if (!$('#option_e').val()) {
    $("#right_option option[value='E']").attr('disabled', 'disabled'); //.removeAttr('disabled')
  }


  $("#option_d, #option_e").on("change keyup paste", function() {

    if (!$('#option_d').val()) {

      $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
    } else {
      $("#right_option option[value='D']").removeAttr('disabled');
    }
    if (!$('#option_e').val()) {
      $("#right_option option[value='E']").attr('disabled', 'disabled');
    } else {
      $("#right_option option[value='E']").removeAttr('disabled');
    }

  });

  $("[aria-owns='bs-select-1']").click(function() {
    if (!$('#option_d').val()) {

      $("#right_option option[value='D']").attr('disabled', 'disabled'); //.removeAttr('disabled')
    } else {
      $("#right_option option[value='D']").removeAttr('disabled');
      $("#bs-select-1-3").removeAttr('aria-disabled');
      $("#bs-select-1-3").removeClass('disabled');
      $("#bs-select-1-3").attr('tabindex', '0');
      $("#bs-select-1-3").parent().removeClass('disabled');
    }
    if (!$('#option_e').val()) {
      $("#right_option option[value='E']").attr('disabled', 'disabled');
    } else {
      $("#right_option option[value='E']").removeAttr('disabled');
    }
  });


});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">


<table>
  <tr>
    <td><label class="control-label">Option (D)</label></td>
    <td><input id="option_d" class="form-control" type="text" name="option_d" placeholder="Option (D)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Option (E)</label></td>
    <td><input id="option_e" class="form-control" type="text" name="option_e" placeholder="Option (E)" /></td>
  </tr>
  <tr>
    <td><label class="control-label">Right Answer</label></td>
    <td>
      <select id="right_option" class="form-control selectpicker" name="part" data-live-search="true" required>
        <option value="" selected disabled hidden>Select Quiz</option>
        <option value="A" data-tokens="Option A">Option A</option>
        <option value="B" data-tokens="Option B">Option B</option>
        <option value="C" data-tokens="Option C">Option C</option>
        <option value="D" data-tokens="Option D">Option D</option>
        <option value="E" data-tokens="Option E">Option E</option>
      </select>
    </td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
...