Skip to main content

Bug Tracker

Side navigation

#11513 closed bug (invalid)

Opened March 26, 2012 08:09AM UTC

Closed April 10, 2012 08:32AM UTC

jquery .attr('checked') undefined For A Checked Checkbox

Reported by: anonymous Owned by: anonymous
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

it's my way to customize checkbox... I have a span with background and hidden checkbox element

HTML code:

<table class="niceTable referals">
<thead>
<!-- some code -->
</thead>
<tbody>
<tr class="odd">
<td class="checkbox-column">
<span class="niceCheck">
<input class="select-on-check" value="846" id="product-grid_c0_0" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td>
</tr>
<tr class="even">
<td class="checkbox-column"><span class="niceCheck">
<input class="select-on-check" value="847" id="product-grid_c0_1" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td></tr>
<tr class="odd">
<td class="checkbox-column"><span class="niceCheck">
<input class="select-on-check" value="848" id="product-grid_c0_2" checked="checked" type="checkbox" name="product-grid_c0[]">
</span> 
</td>
</tr>
</tbody>
</table>

css:

.niceCheck {
width: 18px;
height: 18px;
display: inline-block;
cursor: pointer;
background: url(../images/chck.png);
margin-top: -2px;
position: relative;
top: 4px;
}

.niceCheck input {
display: none;
}


and my script

/*Nice checkboxes*/
$(document).ready(function() {
    $(".niceCheck").live( 'click',
        /* при клике на чекбоксе меняем его вид и значение */
        function() {
            changeCheck(jQuery(this));
        });

    $(".niceCheck").each(
        /* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
        function() {
            changeCheckStart(jQuery(this));
        });
});

/**
  * функция смены вида и значения чекбокса
  * el - span контейнер дял обычного чекбокса
  * input - чекбокс
  */
function changeCheck(el, event){
    var input = el.find("input");//.eq(0);
  
    alert('value = '+input.attr('value')+' checked='+input.prop("checked"));
  
    if (!input.is(":checked")) {
        el.css("background-position", "0 -18px");

        input.prop("checked", "checked")
    } else {
        el.css("background-position", "0 0");
        input.removeAttr('checked');
    }
    return true;
}

function changeCheckStart(el){
    var input = el.find("input").eq(0);
    if (input.prop("checked")) {
        el.css("background-position", "0 -18px");

//        input.attr("checked", "checked" );
    }
    return true;
}

when i first time click on checkbox it works good. But when i click on the second input alert is "value = 846 checked=false"... When you click second time on the same checkbox it works. I try use .attr and .prop but have same result

Attachments (0)
Change History (2)

Changed March 26, 2012 10:05PM UTC by sindresorhus comment:1

owner: → anonymous
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

Changed April 10, 2012 08:32AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!