CODEWITHSUNDEEP
javascriptjquery
user2034164
user2034164

Reputation: 303

Jquery code not working on site but does in fiddle

I have a list of inputs that has several parents div and then multiple children checkboxes under each parent. there is only 1 level of children.(see links below)

Under each parent I have check boxes (MUST USE checkboxes, rather than radio buttons) and should only allow a single selection of the children within each parent.

I am using the following code on within a fiddle - and it works OK, but applying this to the application is failing, yet there are no error chrome shows to debug what is going on...

$('input[type=checkbox]').click(function () {
    var checkedState = $(this).attr("checked");
    $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
    $(this).attr("checked", checkedState);
});

A working example of what I am trying to achieve can be found here: http://jsfiddle.net/EYtx8/

The dev site that's not working can be found here: http://protoys.gentex.com.au/Products/Catalogue (The page load is slow, I know), you will note that all check boxes can be selected, which is what I am trying to avoid.

As a side note people have mentioned that its not within the DOM. but a wrapped in a

$(document).ready(function() {

Here is the full script on the dev site

<script>

$(document).ready(function() {

//Update the is in stock flag, by altering the criteria input fields.
$("input[[id*='chkInStock']]").change(function() {
    if ($("input[[id*='chkInStock']]").prop('checked') == true) $("input[[id*='nbs-min']]").val('1');
    if ($("input[[id*='chkInStock']]").prop('checked') == false) $("input[[id*='nbs-min']]").val('0');
});

if ('[Settings:chktextsearch]'=='False')
{
    // ALL Text search is turned off in the settings, so use JS to update the "disabledsearchtokens" for all text search tokens -->
    var disabledlist = $("input[[id*='disabledsearchtokens']]").val();
    if (disabledlist.indexOf('search0;') == -1) disabledlist = disabledlist + 'search0;';
    if (disabledlist.indexOf('search1;') == -1) disabledlist = disabledlist + 'search1;';
    if (disabledlist.indexOf('search2;') == -1) disabledlist = disabledlist + 'search2;';
    if (disabledlist.indexOf('search3;') == -1) disabledlist = disabledlist + 'search3;';
    if (disabledlist.indexOf('search4;') == -1) disabledlist = disabledlist + 'search4;';
    if (disabledlist.indexOf('search5;') == -1) disabledlist = disabledlist + 'search5;';
    if (disabledlist.indexOf('search6;') == -1) disabledlist = disabledlist + 'search6;';
    if (disabledlist.indexOf('search7;') == -1) disabledlist = disabledlist + 'search7;';
    if (disabledlist.indexOf('search8;') == -1) disabledlist = disabledlist + 'search8;';
    // Update disabled fields to the postback field -->
    $("input[[id*='disabledsearchtokens']]").val(disabledlist);
   }

   $('input[type=checkbox]').click(function () {
      var checkedState = $(this).attr("checked");           

     $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
   $(this).attr("checked", checkedState);
    });

    $('label').each(function () {
       var $this = $(this);
      $this.html($this.text().replace(/^(\.+)/g, '<span style="display:none">$1</span><span     class="Child">'));
         });
     });

    </script>

Any help would be appreciated.

Upvotes: 0

Views: 141

Answers (7)

Federico J.
Federico J.

Reputation: 15882

I would try with "on" instead of a direct "click", to be sure that you're attaching the handler to the dom element. Try to change:

$('input[type=checkbox]').click(function () {
    var checkedState = $(this).attr("checked");           

$(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
$(this).attr("checked", checkedState);
});

for: 

$(document).on('click', 'input[type=checkbox]', function(){
   var checkedState = $(this).attr("checked");

   $(this).closest('table').find('input[type=checkbox]:checked').removeAttr("checked");
   $(this).attr("checked", checkedState); 
});

This is a typical thing that happens when you are loading the markup via AJAX, I don't know if it's your case. I've also added the closest as @Arun P Johny suggests

Upvotes: 0

Donnie Rock
Donnie Rock

Reputation: 525

After reading your comment I though this could works:

$(document).ready(function(){
    $('input[type=checkbox]').click(function () {
        $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");            
        $(this).attr("checked", "checked");            
    });
});

Upvotes: 0

HTTP
HTTP

Reputation: 1724

I think the problem here is that some selectors are not selecting the targeted element or if you have the correct selector (because i do not know what is actually happening on the codes ) try this simple code that I had wrote for you. Get the logic and implement to what you need (if I did get your what you want to accomplish). 

<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try

$('input[type=checkbox]').on('click', function() { 
   var thisis = $(this);
   $('.check').each(function() { 
      $(this).prop('checked', false);
   });

    $(thisis).prop('checked', true);

});

Check out the fiddle here

Hope it helps!

Upvotes: 0

iubema
iubema

Reputation: 349

try with this:

$(document).ready( function(){
    $('input[type=checkbox]').click(function () {
        var checkedState = $(this).attr("checked");
        $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
        $(this).attr("checked", checkedState);
    });
});

Upvotes: 0

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Only reason I can think of is your JS code execution is taking place before the DOM build up. Place your code inside $(document ).ready(handler) . Checkout jquery documentation for more details http://api.jquery.com/ready/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

There could be 2 problems...

  1. The code is not inside dom ready handler
  2. Using attr() instead of .prop() to set the checked property.

So try

jQuery(function ($) {
    $('input[type=checkbox]').click(function () {
        //if the markup in the jsfiddle is same as the one in your page then try
        $(this).closest('table').find('input[type=checkbox]:checked').not(this).prop("checked", false);
    });
})

Note: Instead of using chained .parent() calls use .closest()

Demo: Fiddle

Upvotes: 3

Felix
Felix

Reputation: 38102

Probably because you're not wrapping your code inside DOM ready handler which jsFiddle already did it for you, try to do:

$(function() {
    $('input[type=checkbox]').click(function () {
        var checkedState = $(this).attr("checked");
        $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
        $(this).attr("checked", checkedState);
    });
});

Upvotes: 0

Related Questions