CODEWITHSUNDEEP
javascriptjqueryasp.netgridviewcheckbox
ash060
ash060

Reputation: 137

checkbox check one at a time not working in gridview

I have multiple checkboxes inside gridview

What i want is, if I select one checkbox and go to select another the first checkbox should get unchecked and second should get checked.

I tried below code

 $('.chk').on('change', function () {
        alert('click');
        $('span.input.chk').not(this).prop('checked', false);
    });

My browser rendered HTML for checkbox is below

 <span class="chk" title="136"><input id="ContentPlaceHolder1_GrdInvoiceDetailsSearch_ob_GrdInvoiceDetailsSearchBodyContainer_ctl02_0_ctl00_0_ChkID_0" type="checkbox" name="ctl00$ContentPlaceHolder1$GrdInvoiceDetailsSearch$ob_GrdInvoiceDetailsSearchBodyContainer$ctl02$ctl02$ctl00$ChkID" /></span>

                            </div><div class="ob_gCd">136</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2">GANDHI ADHIVITIYA COMBINE</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2R">292700</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2R">180</div></div></td><td class="ob_gCW ob_gC_Lc" style="width:21%;"><div class="ob_gCc1"><div class="ob_gCc2R">120</div></div></td></tr><tr class="ob_gRA"><td class="ob_gC ob_gC_Fc" style="width:4%;"><div class="ob_gCc1"><div class="ob_gCc2">
                                <span class="chk" title="102"><input id="ContentPlaceHolder1_GrdInvoiceDetailsSearch_ob_GrdInvoiceDetailsSearchBodyContainer_ctl02_1_ctl00_1_ChkID_1" type="checkbox" name="ctl00$ContentPlaceHolder1$GrdInvoiceDetailsSearch$ob_GrdInvoiceDetailsSearchBodyContainer$ctl03$ctl02$ctl00$ChkID" /></span>

kindly suggest how to achieve this

Upvotes: 0

Views: 195

Answers (2)

Feathercrown
Feathercrown

Reputation: 2591

Use radio buttons, they have this behavior built-in.

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

You will likely need to target the actual checkbox elements beneath your chk class as based on your markup, you are currently targeting the parent <span> elements :

// When one of your checkboxes is checked
$('.chk :checkbox').on('change', function () {
    // Uncheck all of them that are not this
    $('.chk :checkbox').not(this).prop('checked', false);
});

Upvotes: 1

Related Questions