javascript - 如果未选中复选框，则禁用 Bootstrap 输入按钮

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