I am using the jquery-ui sortable interaction. I want to have a checkbox that disables the sortable interaction when it is checked. Both the list order and checkbox status are stored in a mysql database and loaded dynamically using php code and updated with ajax. The code below works for everything except the sortability status of the list does not match the checkbox status when the page first loads. After the first time the checkbox is checked everything works fine. The php variable $items is an object that holds the list and $lock holds either "checked" or "unchecked".
<head>
<script>
$(function() {
$("#sortable").sortable({stop:function(i) {
$.post('/index.php/welcome/process_sort', $("#sortable").sortable("serialize"))
}})
});
</script>
<script>
$(function() {
$("#disabler").change(function() {
if (this.checked) {
$("#sortable").sortable( "option", "disabled", true );
} else {
$("#sortable").sortable("option", "disabled", false);
}
})
});
</script>
</head>
<body>
<input type="checkbox" id="disabler" value="disabler" <?php echo $lock ?> >disable<br> </input>
<ul id="sortable">
<?php
foreach ($item as $row) {
$my_id = "id_".$row->id_items;
$my_text = $row->text;
?>
<li id=<?php echo"$my_id" ?> name=<?php echo"$my_id" ?> value=<?php echo "$my_text"?> class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"> </span><?php echo "$my_text"?></li>
<?php
}
?>
</ul>
</body>
I tried adding a $(document).ready function that contained the jquery if block, but it broke the sortable interaction.
