semantic ui disable поле ввода при установке галочки

Question

У меня есть переключатель и 2 поля ввода. Я хочу добиться того, чтобы отключить поля ввода, когда флажок снят, и наоборот. Вот мой код.

<div class="inline fields"> 
    <div class="four wide field"> 
    <div class="ui toggle checkbox"> 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox"> 
     <label>A4</label> 
    </div> 
    </div> 
    <div class="six wide field"> 
    <label>Grayscale</label> 
    <div class="ui right labeled input"> 
     <div class="ui label">Php</div> 
     <input name="gray" value="1.00" placeholder="0.00" type="text"> 
     <div class="ui basic label">/page</div> 
    </div> 
    </div> 
    <div class="six wide field"> 
    <label>Colored</label> 
    <div class="ui right labeled input"> 
     <div class="ui label">Php</div> 
     <input name="colored" value="1.00" placeholder="0.00" type="text"> 
     <div class="ui basic label">/page</div> 
    </div> 
    </div> 
</div> 

и Javascript

$('.ui.checkbox').checkbox(); 

Я исследовал с помощью вариантов поведения для флажков, как присоединять события, и т.д., или с помощью функции обратного вызова, но я не знаю, как правильно их использовать. I've also tried implementing this, но я думаю, что .next() не подходит моей проблеме. Я пытался экспериментировать и исследовать, но я не могу найти решение.

Answer 1

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

$('#a4').change(function(){ 
 
    $('#gray').attr('disabled',!this.checked); 
 
    $('#colored').attr('disabled',!this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inline fields"> 
 
    <div class="four wide field"> 
 
    <div class="ui toggle checkbox"> 
 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox"> 
 
     <label>A4</label> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Grayscale</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input id="gray" name="gray" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input id="colored" name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Используя указанную ссылку, я придумал это решение.

$('#a4').change(function(){ 
 
    $('input[name=gray]').attr('disabled',!this.checked); 
 
    $('input[name=colored]').attr('disabled',!this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="inline fields"> 
 
    <div class="four wide field"> 
 
    <div class="ui toggle checkbox"> 
 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" checked> 
 
     <label>A4</label> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Grayscale</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="gray" value="1.00" placeholder="0.00" type="text"> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text"> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
</div>

Теперь вы можете установить некоторые идентификаторы на текстовых входов, поэтому вам не придется использовать input[name=gray]. Я лично предпочитаю идентификаторы такого синтаксиса.

EDIT:

Добавлен атрибут проверяется с флажком, чтобы отразить потребности OP.

Answer 3

Используйте функцию on с параметром «change», чтобы добавить прослушиватель событий к изменению флажка, а затем в части обратного вызова используйте селектор ввода по имени «серый», поэтому установите свойство disabled на инверсию проверенного состояния флажка.

Если вы хотите сделать это для всех флажков в форме с большим количеством элементов, до тех пор, пока они следуют один и тот же базовый дизайн шаблона, вы можете использовать parent() и find() вместе, чтобы найти входные элементы определенного типа в пределах определенного родительский элемент.

$("input[type='checkbox']").on("change", function() { 
 
    $(this).parent().parent().parent().find("input[type='text']").prop("disabled", !this.checked); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inline fields"> 
 
    <div class="four wide field"> 
 
    <div class="ui toggle checkbox"> 
 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" /> 
 
     <label>A4</label> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Grayscale</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true"> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="inline fields"> 
 
    <div class="four wide field"> 
 
    <div class="ui toggle checkbox"> 
 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" /> 
 
     <label>C4</label> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Grayscale</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true"> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="inline fields"> 
 
    <div class="four wide field"> 
 
    <div class="ui toggle checkbox"> 
 
     <input id="a4" name="a4" tabindex="0" class="hidden" type="checkbox" /> 
 
     <label>B4</label> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Grayscale</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="gray" value="1.00" placeholder="0.00" type="text" disabled="true"> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
    <div class="six wide field"> 
 
    <label>Colored</label> 
 
    <div class="ui right labeled input"> 
 
     <div class="ui label">Php</div> 
 
     <input name="colored" value="1.00" placeholder="0.00" type="text" disabled> 
 
     <div class="ui basic label">/page</div> 
 
    </div> 
 
    </div> 
 
</div>