Disable bootstrap input button if checkbox not checked

Question

My check box when unchecked my input with id of delete should be disabled, but for some reason the java script code it not picking up the id of both input and checked input. I use bootstrap 3 and codeigniter.

What's wrong with my code? Unsure why not working. All JS scripts loaded correct.

<script type="text/javascript">
$('#check_delete').click(function(){
    if($(this).attr('checked') == false){
         $('input #delete').attr("disabled","disabled");   
    } else {
        $('input #delete').removeAttr('disabled');
    }
});
</script>

<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">

View

<?php echo form_open('admin/users_group/delete');?>

<div class="table-responsive">
<table  class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
<th class="text-left">User Group ID</th>
<th class="text-left">Name</th>
<th class="text-right">Action</th>
</tr>
</thead>
<?php if ($users_group == TRUE) {?>
<?php foreach ($users_group as $user_group) { ?>
    <tr>
    <td class="text-center"><?php if (in_array($user_group['user_group_id'], $selected)) { ?>
    <input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" checked="checked" />
    <?php } else { ?>
    <input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" />
    <?php } ?>
    </td>
    <td class="text-left"><?php echo $user_group['user_group_id']; ?></td>
    <td class="text-left"><?php echo $user_group['name']; ?></td>
    <td class="text-right">
    <input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
    <a href="<?php echo $user_group['edit']; ?>" class="btn btn-primary"><i class="fa fa-pencil"></i> Edit</a></td>
    </tr>
<?php } ?>
<?php } else { ?>
<tr>
 <td class="text-center" colspan="3">No Results</td>
</tr>
<?php } ?>
</table>
</div>

<?php echo form_close();?>
</div>
<div class="panel-footer clearfix">

<div class="pull-left pag-user-group"><?php echo $pagination; ?></div>
<div class="pull-right" style="padding-top: 7.5px;"><?php echo $results; ?></div>
</div>
</div>

</div>
</div>

</div><!-- # Page Inner End -->
</div><!-- # Page End -->

</div><!-- # Wrapper End -->
<script type="text/javascript">
$('#check_delete').click(function(){
    if($(this).attr('checked') == false){
         $('input #delete').attr("disabled","disabled");   
    } else {
        $('input #delete').removeAttr('disabled');
    }
});
</script>

Answer 1

You declare your script before the HTML code.

A HTML page is read sequentially.

alert( $('input#delete').length )

<input id="delete" >

This will alert "0" because jQuery looks for #delete, and then, next line, #delete exists.

Two solutions :

1) Move your script after HTML, at the end, before the </body> tag.

2) Wrap your code in $(function(){ /* Your code here */ } . This will wait for the page to be ready before executing the script.

<input id="delete" >

alert( $('input#delete').length )

This will work, and this also will :

$(function(){
   alert( $('input#delete').length )
})

<input id="delete" >