如果未選中復選框，則禁用引導程序輸入按鈕

Question

當未選中帶有刪除ID的輸入時，應禁用我的復選框，但是由於某些原因，Java腳本代碼無法同時選擇輸入和選中的輸入的ID。 我使用bootstrap 3和codeigniter。

我的代碼有什么問題？ 不確定為什么不起作用。 所有JS腳本加載正確。

<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">

視圖

<?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

您在HTML代碼之前聲明腳本。

依次讀取HTML頁面。

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

<input id="delete" >

這將警告“ 0”，因為jQuery查找#delete， 然后查找下一行#delete。

兩種解決方案：

1）將腳本移到HTML之后，最后移到</body>標記之前。

2）將代碼包裝在$(function(){ /* Your code here */ } ，這將等待頁面准備就緒后再執行腳本。

<input id="delete" >

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

這將起作用，這也將：

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

<input id="delete" >