jQuery uncheck checkbox if text input has length

Question

I need to un check a checkbox (if it has been checked) if another text input has a value (M/DD/YYY format). I am using glDatePicker to set the value for #StartDate, the content brought in via ajax so Im using the '.on' funciton

<div id="bottomContent">
    <input type="text" id="StartDate" name="StartDate"><br />
    <input type="text" id="EndDate" name="EndDate"><br />
    <label for="AllDate"><input type="checkbox" name="AllDate" id="AllDate">All Dates</label>
</div>

$(function() {
    $('#bottomContent').on('change', '#StartDate', function(e){
        var value = $(this).val();
        if ( value.length > 0  ) {
        //$('#AllDate').prop('checked', false);
        console.log('hi');
        }
    });
});

Im pretty sure i have my parameters messed up in the .on arguments.

What version of jQuery are you using? If I check the box, type in the top field and then click outside of it, the checkbox gets unchecked: http://jsfiddle.net/j08691/PUzZw/. Isn't that what you want? — j08691, Mar 08 '13 at 20:50
I need it to uncheck the checkbox as soon as a value is entered in #StartDate not on blur. Im using version 1.8.2 and am using the glDatePicker to get value into #StartDate — Dirty Bird Design, Mar 08 '13 at 20:57

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

The .prop('checked', false) should work as expected. Try uncommenting the line, and it should work (see fiddle link below).

$(function() {
    $('#bottomContent').on('change', '#StartDate', function(e){
        var value = $(this).val();
        if ( value.length > 0  ) {
             $('#AllDate').prop('checked', false);
        console.log('hi');
        }
    });
});

I have previously recommended to use .removeProp(), but I'm mistaken.

See fiddle here - http://jsfiddle.net/teddyrised/Xkvcx/

edited May 23 '17 at 10:32

Community

1
1

answered Mar 08 '13 at 20:48

Terry

63,248
15
96
118

According to http://api.jquery.com/removeprop/ .removeProp should not be used to remove checked. (because it is totally removed and can't be added back again.) – Pedro Estrada Mar 08 '13 at 20:50

score 1 · Accepted Answer · answered Mar 08 '13 at 21:08

1

OK! here you go, since you're using glDatePicker.

I have modified the jsfiddle to do so as well.

http://jsfiddle.net/Xkvcx/8/

$(function() {
    $('#StartDate').glDatePicker({
        onClick: (function(el, cell, date, data) {
            el.val(date.toLocaleDateString());
            $('#AllDate').prop('checked', false);
        })
    });
});

using this script, whenever you select a selectable date, it will remove the checkbox from AllDate

and obviously this all came from this reference: http://glad.github.com/glDatePicker/#reference

Thank you and good night!

answered Mar 08 '13 at 21:08

Pedro Estrada

2,384
2
16
24

Lo siento Pedro, y gracias. – Dirty Bird Design Mar 08 '13 at 21:13
@DirtyBirdDesign no te funciono? – Pedro Estrada Mar 08 '13 at 21:14
si te ayudo, marcalo como respuesta plis y gracias – Pedro Estrada Mar 08 '13 at 21:29
por supuesto, muchas gracias Pedro. – Dirty Bird Design Mar 08 '13 at 21:32

score 0 · Answer 3 · answered Mar 08 '13 at 20:50

0

$('#StartDate').on('change', function(e){
    $('#AllDate')[0].checked = $(this).val().length > 0;
});

Example

Or, if you are updating #bottomContent with AJAX and need to keep the .on() binding the same:

$('#bottomContent').on('change', '#StartDate', function(e){
    $('#AllDate')[0].checked = $(this).val().length > 0;
});

Example

answered Mar 08 '13 at 20:50

Brad Christie

100,477
16
156
200

Nothing seems to work in my case. If I check the checkbox, then (by date picker) put a value in #StartDate, it is not clearing the #AllDate checkbox. I can log the value of the input - not sure if the date picker is screwing it up – Dirty Bird Design Mar 08 '13 at 20:54
@DirtyBirdDesign: The examples I've provided are a "virgin scenario" and work. So, given the most basic implementation works, are you sure you don't have any other scripts competing with the bindings? – Brad Christie Mar 08 '13 at 20:59
I apologize if my communication isn't clear. In your example, if you check the checkbox, THEN click in #StartDate and bring up datepicker and select a date it is not un checking the checkbox, which is what I need. – Dirty Bird Design Mar 08 '13 at 21:02
@DirtyBirdDesign: Just change the condition then. `.checked = $(this).val() == 0` (See [this](http://jsfiddle.net/8Yesy/3/)) – Brad Christie Mar 08 '13 at 21:07

jQuery uncheck checkbox if text input has length

3 Answers3