CODEWITHSUNDEEP
jqueryjquery-on
Nancy Collier
Nancy Collier

Reputation: 1529

Why does my conditional jquery script only work once?

I can click on the tr and it will check the checkbox. Then, I can click on the tr a second time and it will uncheck the checkbox. However, if I try to click the same tr a third time (or greater), then the script no longer works. I have tried several versions of this script using prop() instead of ``attr(), but it still exhibits the same behavior. Why?

HTML:

<tr onclick="checkBox('ID')" id="recordID">
    <td>
        <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID">
    </td>
</tr>

jquery:

function checkBox(ID) {
    $(document).on("click",'#record'+ID,function(){
        $(document).on("click",'input#myRecords'+ID,function(e){
            e.stopPropagation();
        });
        var ischecked = $('input#myRecords'+ID).is(":checked");
        if(ischecked) {
            $('input#myRecords'+ID).removeAttr("checked");
        } else {
            $('input#myRecords'+ID).attr("checked", "checked");
        }
    });
});

Upvotes: 1

Views: 133

Answers (2)

Fresheyeball
Fresheyeball

Reputation: 30015

I believe your problem stems from two things:

  1. having nested listeners
  2. a permanent false positive

HTML:

<tr id="recordID"> <!-- remove the onclick, you are already listening for it -->
    <td>
        <input type="checkbox" name="myRecords[]" id="myRecordsID" value="ID" />
    </td>
</tr>

jquery:

function checkBox(ID) {
    // move this listener outside so it does not require a click to activate
    $(document).on("click",'input#myRecords'+ID, function(e){
        e.stopPropagation();
    });
    $(document).on("click",'#record'+ID,function(){
        var ischecked = $('input#myRecords'+ID).is(":checked");
        if(ischecked) {
            // use .prop, while your method will check and uncheck the box
            // it will not work properly with jquery's .is(":checked");
            // eventually resulting in a permanent false positive
            $('input#myRecords'+ID).prop('checked', false);
        } else {
            $('input#myRecords'+ID).prop('checked', true)
        }
    });
};
checkBox('ID'); // activates listeners

http://jsfiddle.net/fresheyeball/K8L57/

If I was writing this http://jsfiddle.net/fresheyeball/3qped/

HTML:

<tr class="record">
    <td>
        <input type="checkbox" name="myRecords[]" value="ID" />
    </td>
</tr>

jQuery:

$('.record').on('click',function(){
    var checkBox = $(this).find('input');
    checkBox.prop('checked', !checkBox.prop('checked'));
});

Upvotes: 1

Daniel
Daniel

Reputation: 4946

There is nested code and I wonder if the way you apply the on() jquery function is correct.

It can be simplified to this:

   <table>
    <tr id="recordID12" class="myRecordEntry">
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID12" value="ID">
        </td>
    </tr>
    <tr id="recordID15" class="myRecordEntry">
        <td>
            <input type="checkbox" name="myRecords[]" id="myRecordsID15" value="ID">
        </td>
    </tr>
</table>


$(document).ready(function () {
    $(".myRecordEntry").click(function (e) {
        var id = e.currentTarget.id;
        var idnr = id.match(/\d+/g);
        var chk = $("#myRecordsID" + idnr).is(":checked");
        if (chk == false) {
            $("#myRecordsID" + idnr).prop("checked", true);
        } else {
            $("#myRecordsID" + idnr).prop("checked", false);
        }
    });
});

fiddle: http://jsfiddle.net/djwave28/p8Sr8/4/

edit: What you want is likely to generate multiple rows with your record collection and therefor the table rows may have a different ID. I have made the code adaptable to suit this need.

Upvotes: 0

Related Questions