Question

取消选中我的复选框，我的输入ID为delete，应该被禁用，但由于某种原因，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" >

如果未选中复选框，则禁用引导输入按钮

1 个答案: