CODEWITHSUNDEEP
jqueryhtmlcheckbox
theTuxRacer
theTuxRacer

Reputation: 13869

How to programatically check this iphone style checkbox?

I am using this iphone style checkbox. All checkboxes are checked by default. If it is unchecked, a modal is shown, which has a form and all. When I close this modal, I want the checkbox to be enabled again.

This is the JS that shows the modal when the checkbox is changed to false:

$(window).load(function() {
  var onchange_checkbox = $('.on_off :checkbox').iphoneStyle({
    checkedLabel: 'Confirm',
    uncheckedLabel: 'Edit',
    onChange: function(elem, value) {
        if($(elem)[0].checked==false){
            $('.modal').show();
            $("body").append('<div class="modalOverlay">');
        }
    }
  });
});

This is the table of checkboxes:

%{for(int i=0;i<confirmAtt.size ();i=i+9){}%
<tr>
<td>${confirmAtt.get(i)}</td>
<td>${confirmAtt.get(i+1)}</td>
<td>${confirmAtt.get(i+2)}</td>
<td>${confirmAtt.get(i+3)}</td>
<td>${confirmAtt.get(i+4)}</td>
<td>${confirmAtt.get(i+5)}</td>
<td>${confirmAtt.get(i+6)}</td>
<td>${confirmAtt.get(i+7)}</td>
<td>${confirmAtt.get(i+8)}</td>
<td class="modalInput on_off"><input type="checkbox" id="on_off_${i}"
    checked="checked" /></td>
</tr>
%{}}%

The modal with the close button:

    <div class="modal" id="aModal">
        <p>
            <button class="close" onclick="foo();">Close</button>
        </p>
    </div>

which calls this function:

function foo(){
    $('.modal').hide();
    $('.modalOverlay').remove();
    onchange_checkbox.prop('checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh");
    //tried changing this line to
    //$('.on_off').attr("checked" , true);
    //doesn't work
}

Upvotes: 1

Views: 2533

Answers (1)

Jeemusu
Jeemusu

Reputation: 10533

If you just want to set the checkbox back to checked, you can use the following code:

$(window).load(function() {

      var onchange_checkbox = ($('.on_off :checkbox')).iphoneStyle();


      onchange_checkbox.prop('checked', !onchange_checkbox.is(':checked'))
      .iphoneStyle("refresh");


});

http://jsbin.com/urocug/1/

Update

Sorry, I now see you tried to implement this within your code. The problem is that you are declaring the checkbox as a variable within $(window).load(function() { while you try to access the same variable outside the scope of $(window).load(function() {

Ideally what you need to do is move your foo(){} function into your $(window).load(function() {:

Upvotes: 2

Related Questions