semantic ui disable input field when checkbox toggled

Question

I have a toggle checkbox and 2 input fields. What I want to achieve is to disable the input fields when the checkbox is unchecked, and vice versa. Here's my code.

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

and the javascript

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

I've researched using behaviors for checkboxes like attach events, etc or using callbacks but I don't know how to use them properly. I've also tried implementing this but I think the .next() doesn't fit my problem. I tried experimenting and researching but I can't seem to find a solution.

Chukwuemeka Onyenezido · Accepted Answer · 2017-01-05 09:25:20Z

The inputs should be disabled at the first instance. Then enabled whenever the box is checked.

$('#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>

mike510a · Accepted Answer · 2017-01-05 09:33:51Z

Use the on function with the parameter "change" to add an event listener to the checkbox changing, then inside the callback part use the input selector by name 'gray' so set the disabled property to the inverse of the checked state of the checkbox.

If you want to do this for all checkboxes in a form with many items, as long as they follow the same basic template design, you can use parent() and find() together to find the input elements of a certain type within a certain parent element.

$("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>

Pierre C. · Accepted Answer · 2017-01-05 09:35:54Z

0

Using the link you provided, I came up with this solution.

$('#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>

Now you might want to set some IDs on your text inputs so you don't have to use input[name=gray]. I personally prefer IDs to this kind of syntax.

EDIT:

Added checked attribute to the checkbox to reflect OP needs.

edited Jan 5, 2017 at 9:35

answered Jan 5, 2017 at 9:14

Pierre C.

1,4281 gold badge11 silver badges20 bronze badges

1 Comment

Chukwuemeka Onyenezido Over a year ago

I ran you code snippet and the inputs are working at first instance even though the checkbox is unchecked.

Collectives™ on Stack Overflow

semantic ui disable input field when checkbox toggled

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related