checkbox does not change visual state

Question

This might be very simple, but I am breaking my head for an hour already. I have a simple radio with two buttons:

<input class="form-control icheck" id="cash_prize" name="cash_prize" type="radio" value="1" style="position: absolute; opacity: 0;">
<input class="form-control icheck" id="noncash_prize" name="cash_prize" type="radio" value="0" style="position: absolute; opacity: 0;">

And a checkbox:

<input class="form-control icheck" id="issuable_via_logistics" name="issuable_via_logistics" type="checkbox" value="1" style="position: absolute; opacity: 0;">

On radio with id "cash_prize" On click I fire up a JS function:

$('#cash_prize').on('ifChecked', function(){
    var chkbox = $('#issuable_via_logistics');
    chkbox.prop('checked', false);

Checkbox gets unchecked if I am checking it's state, but visually it remains checked. Please, how to change that?

There is no standard `ifChecked` event (you'd use `change` for a checkbox). Is that event provided by some library you're using? — T.J. Crowder, Oct 17 '18 at 16:02
why is the checkbox `opacity:0`? Could you turn this into a snippet please? Also, checkout this question, it may help: https://stackoverflow.com/questions/901712/how-to-check-whether-a-checkbox-is-checked-in-jquery & here's another link you might find helpful: https://stackoverflow.com/questions/33900838/check-uncheck-ifchecked-not-working — admcfajn, Oct 17 '18 at 16:03

score 0 · Answer 1 · answered Oct 17 '18 at 16:10

0

Try this instead. It's what I've used to change the state of check boxes in the past, and is also what this answer in another thread says should be good.

$('#cash_prize').on('ifChecked', function(){
    $('#issuable_via_logistics')[0].checked = false;

answered Oct 17 '18 at 16:10

ThatAstronautGuy

41
1
7

wang · Accepted Answer · 2018-10-17T16:20:53.760

0

use $(element).iCheck('uncheck')

so in your case:

$('#issuable_via_logistics').iCheck('uncheck')

edited Oct 17 '18 at 16:20

answered Oct 17 '18 at 16:11

wang

1,660
9
20

Love you! Yes, that's what you get when you use libraries you are not familiar with. – Arūnas Kiršis Oct 17 '18 at 16:26
happy to help you :) – wang Oct 17 '18 at 16:29
Sorry, forgot that. @Zhong Wang – Arūnas Kiršis Oct 17 '18 at 18:32

score 0 · Answer 3 · answered Oct 17 '18 at 16:25

This seems to work...

<html>
<body>
cash prize: 
<input class="form-control icheck" id="cash_prize" name="cash_prize" type="radio">
<br />
non cashprize: 
<input class="form-control icheck" id="noncash_prize" name="cash_prize" type="radio">
<br />
<br />
checkbox: 
<input class="form-control icheck" id="issuable_via_logistics" name="issuable_via_logistics" type="checkbox" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#cash_prize').change(function () {
            if (this.checked) {
                $('#issuable_via_logistics').prop('checked', true);
            };
        });

        $('#noncash_prize').change(function () {
            if (this.checked) {
                $('#issuable_via_logistics').prop('checked', false);
            };
        });
    });
</script>

score 0 · Answer 4 · answered Oct 17 '18 at 16:28

This might hep you.

$('#cash_prize').change(function(){
 if ($(this).prop('checked'), true){
  $('#issuable_via_logistics').prop('checked',false);
 }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="cash_prize" name="cash_prize" type="radio" value="1">Prize 1
<input id="noncash_prize" name="cash_prize" type="radio" value="0" >Prize 2

<input id="issuable_via_logistics" name="issuable_via_logistics" type="checkbox" value="1" checked>

checkbox does not change visual state

4 Answers4