CODEWITHSUNDEEP
jqueryhtml
user974802
user974802

Reputation: 3457

Unable to set the checkbox class checked inside a div

With the following HTML, I'm trying to set the checkbox present under the below div to checked.

HTML:

<div id="69" class="activateUiHTML" data-role="collapsible">
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="69" data-mini="true" id_attr="69" />
                    <label item_id_itr_some="69" class="testtt" for="checkbox-mini-0">Cold Tea, Fresh Chai gold Ice</label> 
                    <i class="delete-item-btn"></i> 
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col"> 
                    <span class="prd-sm-img">                         
                        <img id="imagesd" type="img" height="40" width="40" src="http://192.168.2.46:8080/OrderSnacks/JSON_images/icecream_cup_vanilla.jpg" />                         
                        <span></span>
                    </span>
                </div>
                <div class="col"> 
                    <i class="minus" id_attr="69"></i>  
                    <i class="qt qt_69" id_attr="69">1</i>  
                    <i class="plus" id_attr="69"></i> 
                </div>
                <div class="col"> 
                    <a style="display:block" id="69" vendor_items_id="83" class="btn btn-sm topp" data-count="2">Topping  <span>2</span>
                    </a> 
                </div>
                <div class="price" style="display:none;">75</div>
                <div class="col total total-rs total_69" id_attr="69">785</div>
            </li>
        </ul>
    </div>
</div>

Javascript:

var activehtml = $("#addtoordersdiv" + v_item_id).html();
var buildcart = $('<div id="' + v_item_id + '" class="activateUiHTML"  data-role="collapsible">');
buildcart.append(activehtml);
$('#' + v_item_id + '.activateUiHTML').find(".checkboxclas").prop('checked', true);

This doesn't work as expected.
But the same piece of code:

var v_item_id = 69;
$('#' + v_item_id + '.activateUiHTML').find(".checkboxclas").prop('checked', true);

Works fine when tested in the browsers' console.

Upvotes: 1

Views: 100

Answers (2)

Sid M
Sid M

Reputation: 4364

This works 

var v_item_id = 69 ;
    $('#'+v_item_id+'.activateUiHTML').find(".checkboxclas").prop('checked',true);

because you've specified value of v_item_id in it before setting the checked property of checkbox where as in

var activehtml = $("#addtoordersdiv"+v_item_id).html();
var buildcart = $('<div id="' + v_item_id + '" class="activateUiHTML"  data-role="collapsible">');
buildcart.append(activehtml);
$('#'+v_item_id+'.activateUiHTML').find(".checkboxclas").prop('checked',true);

it shows an error message v_item_id is not defined in console. Hence it doesn't work.

Upvotes: 2

Pranav
Pranav

Reputation: 666

Your code doesnt have document.ready. Add this line to your code :

$(document).ready(function(){
  var v_item_id = 69 ;
    $('#'+v_item_id+'.activateUiHTML').find(".checkboxclas").prop('checked',true);  
});

Demo : http://plnkr.co/edit/ShVU7GVBDxBvN2tMDXh5?p=preview

Upvotes: 1

Related Questions