Отключить выбор, если флажок установлен jquery - PullRequest
Новая
       10

Отключить выбор, если флажок установлен jquery

0 голосов
/ 10 марта 2020

У меня есть сценарий html, в котором есть множественный выбор, который я хочу отключить при установке флажка.

Пример: 

<p><input type="checkbox" id="chk_select" name="check" value="ok" "/> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>

Возможно ли это отключить множественный выбор с помощью jquery?

Спасибо! Джузеппе

Ответы [ 5 ]

1 голос
/ 10 марта 2020

Попробуйте это. 

function checkstate() {
    document.getElementById('soci').disabled = document.getElementById('chk_select').checked;
}
<p><input type="checkbox" id="chk_select" name="check" value="ok" onclick="checkstate()"> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>
0 голосов
/ 10 марта 2020

Надеюсь, что это полезно ...

просмотр 

 <p>
    <input type="checkbox" id="chk_select" name="check" value="ok" onclick="myFunction()"/> 
 deselect
    </p>

скрипт 

  <script>
    function myFunction() {
      var checkBox = document.getElementById("myCheck");
      if (checkBox.checked == true){
        document.getElementById('soci').disabled = true;
      } else {
        document.getElementById('soci').disabled = false;
      }
    }
    </script>
0 голосов
/ 10 марта 2020

Ниже приведено решение на основе jQuery, но его можно легко сделать с помощью vanilla JS в современных браузерах: 

$('#chk_select').change(function(){
  $('#soci').attr('disabled',this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" id="chk_select" name="check" value="ok"/> deselect</label>
<p> <select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select> </p>

Vanilla JS решение для всех браузеров, кроме Inte rnet Explorer: 

function qs(s){return document.querySelector(s);}
qs('#chk_select').addEventListener('change',function(){
 qs('#soci').disabled=this.checked;});
<label><input type="checkbox" id="chk_select" name="check" value="ok"/> deselect</label>
<p> <select multiple="multiple" name="candidato[]" id="soci" required>
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select> </p>
0 голосов
/ 10 марта 2020

Это сделает трюк 

$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')){
$('select').attr('disabled','disabled')
}else{
$('select').removeAttr('disabled','disabled')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="checkbox" id="chk_select" name="check" value="ok" "/> deselect</p>

<p>
<select multiple="multiple" name="candidato[]" id="soci" required >
<option value="">-</option>
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
</select>
</p>
0 голосов
/ 10 марта 2020

Вы можете найти, как проверить, установлен ли флажок здесь: Проверить, установлен ли флажок с jQuery

Чем вы можете найти, как отключить, выберите здесь: jQuery - отключить выбранные опции

Попробуйте переключить класс на выбор, если флажок установлен.

Также, вы можете найти рабочий пример здесь: отключить установите флажок, если установлен

...