jQuery code works in Firefox and Opera,but not in Chrome and IE - not reading checkbox value correctly

Question

0.00/5 (No votes)

See more:

, +

I have this code in my view:

C#

@foreach (WebStill.Rola r in Model.Role)
{
     @Html.CheckBoxFor(p => r.Selektovana, 
       new { @RolaID =r.RolaID,@class="cbRadnikRole",data_id=r.RolaID }); @r.Naziv
}

Which outputs this html:

HTML

<input class="cbRadnikRole" data-id="1" data-val="true" data-val-required="The Selektovana field is required." id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />Administrator                    <br />
<input class="cbRadnikRole" data-id="2" id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />Serviser                    <br />
<input class="cbRadnikRole" data-id="3" id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />Supervizor                    <br />
<input class="cbRadnikRole" data-id="4" id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />Vozač                    <br />
<input class="cbRadnikRole" data-id="5" id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />CHIEF supervizor                    <br />
<input class="cbRadnikRole" data-id="6" id="r_Selektovana" name="r.Selektovana" type="checkbox" value="true" /><input name="r.Selektovana" type="hidden" value="false" />Operater                    <br />

and this jQuery:

JavaScript

$(document).ready(function () {
        $(".cbRadnikRole").change(function () {
            if ($(".cbRadnikRole:checked").data('id') == 2) {
                $('#ulOrgJedinice').show();
            }
            else {
                $('#ulOrgJedinice').hide();
                $('#ulOrgJedinice').find("input").attr('checked', false);
            }
        });

        $(".cbRadnikRole").change();
    });

This works in Opera and Firefox,but IE and Chrome are not reading data-id correctly.
For example when i click on check box with data-id 1,i get 2,or sometimes 3 or other id.
I have similar code in other view,but i use this insted of cbRadnikRole:checked,which i cant use here because i need to trigger it when page loads.

Any suggestions ?

Posted 3-Oct-13 2:02am

Member 10297347

Add a Solution

3 solutions

Solution 2

@Akinmade Bond
I tried that,and every other combination i could think of but the problem is in the selector

JavaScript

$(".cbRadnikRole:checked")

It gets it right only the first time,and after that is like its late or something.I fixed it,but it has some code duplication.I manually hide what i want outside of the event handler.

JavaScript

 $(document).ready(function () {

if ($(".cbRadnikRole:checked").data('id') == 2) {
   $('#ulOrgJedinice').show();
}
else {
   $('#ulOrgJedinice').hide();
   $('#ulOrgJedinice').find("input").attr('checked', false);
}

$(".cbRadnikRole").change(function () {
if ($(this).data('id') == 2) {
   $('#ulOrgJedinice').show();
}
else {
   $('#ulOrgJedinice').hide();
   $('#ulOrgJedinice').find("input").attr('checked', false);
}
});

When i use 'this' it works as it should.

Posted 3-Oct-13 22:19pm

Member 10297347

Comments

Akinmade Bond 5-Oct-13 14:13pm

See my edited solution.

Solution 1

EDIT:

JavaScript

$(document).ready(function () {
    $(".cbRadnikRole").each(function (index) {
        $(this).on('change', function(val){
            $(this).prop( "checked", function( i, val ) {
                if ( val ) {
                    var id = $(this).attr('data-id');					
                    
                    if ( id == 2 ) {
                        checker(true);
                    }
                } else {
                    checker(false);
                }
            });			
        });
    });
		
    function checker (val) {
        if (val) {
            $('#ulOrgJedinice').show();
        } else {
            $('#ulOrgJedinice').find("input").attr('checked', false);
            $('#ulOrgJedinice').hide();
        }
    }
});

Posted 3-Oct-13 21:05pm

Akinmade Bond

Updated 5-Oct-13 8:12am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 10331745 · Accepted Answer · 2013-10-04T01:37:00

Solution 3

Put down this 2 code above your title tag in head section.

HTML

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

because due to compatibility issues it might not work so above code can help to solve that layer of issue.

Posted 4-Oct-13 1:37am

Member 10331745

Updated 5-Oct-13 5:54am

v2