javascript按钮始终禁用

时间:2013-07-30 15:19:08

标签: javascript jquery

之前可能已经回答了这个问题,我想为转发道歉,但由于我不确定从哪里开始修复它,我不知道该尝试查找什么寻求解决方案。请耐心等待。

我已经获得了CMS的表单,我已经使用教程动态添加我需要的字段。 EX:表单为子弹点加载了0个字段条目,但是如果他们想要一些,他们可以单击一个按钮,说明添加项目符号,然后出现一个输入字段。它在一个数组中。提交给DB就好了。如果没有显示字段,则禁用删除按钮。一切正常。如果你从一个新的表格开始没有字段。问题属于此表单的编辑版本。

这是我的代码:

<div id="bullets">
<?php
$sql_bullet_display = 'SELECT * FROM exampleDB.prod_feature_bullets WHERE product_name ="'.$row_product_details['product_name'].'";';
$res_bullet_display = mysql_query($sql_bullet_display) or die(mysql_error().'<br />bad query<br />'. $sql_bullet_display);
$newNum = 1;
while($row_bullet_display = mysql_fetch_assoc($res_bullet_display)){
?>
<div id="bullet<?php echo $newNum; ?>" class="clonedInput2">
<input type="hidden" id="bullet_order<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_order]" value="<?php echo $newNum; ?>" />
<input type="text" id="bullet_text<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_text]" value='<?php echo $row_bullet_display['bullet_text']; ?>' />
<input type="text" id="bullet_subtext<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_subtext]" value='<?php echo $row_bullet_display['sub_text']; ?>' />
</div>
<?php
$newNum++;
}
?>
</div>
<div>
<input type="button" id="btnAdd" value="Add Bullet" />
<input type="button" id="btnDel" value="Remove Bullet" />
</div>

这是随之而来的Javascript。

<script type="text/javascript">
$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

        $('<div id="bullet' + newNum + '" class="clonedInput2"><input type="hidden" id="bullet_order' + newNum + '" name="bullet[' + newNum + '][bullet_order]" value="' + newNum + '" /><input type="text" id="bullet_text' + newNum + '" name="bullet[' + newNum + '][bullet_text]" /><input type="text" id="bullet_subtext' + newNum + '" name="bullet[' + newNum + '][bullet_subtext]" /></div>').appendTo('#bullets'); 

        // enable the "remove" button
        $('#btnDel').attr('disabled',''); 

        // business rule: you can only add 15 bullets
        if (newNum == 15)
            $('#btnAdd').attr('disabled','disabled');
    });

    $('#btnDel').click(function() {
        var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
        $('#bullet' + num).remove();     // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled','');

        // if no element remains, disable the "remove" button
        if (num == 0)
            $('#btnDel').attr('disabled','disabled');
    });

    $('#btnDel').attr('disabled','disabled');
});

过去这对我来说非常有效,但就像我说的那样,它只适用于从0个子弹入口领域开始的新形式。我的问题在于创建编辑表单。当你点击编辑时,我已经在DB中显示了两个子弹。添加按钮显示已启用。首次出现表单时,始终禁用删除按钮。即使显示了两个条目并且所有内容都已正确填充。

但是,如果单击“添加”按钮,则会显示第三个输入字段,它将启用“删除”按钮。很沮丧。我不确定要编辑什么,所以它会说:好吧,在页面加载时,我们发现数据库已经填满了两个子弹,所以删除按钮应该从一开始就处于活动状态。我到目前为止所做的每一项改变都打破了按钮。

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

尝试此操作以删除已禁用的属性

$("#btnDel").removeAttr("disabled");

答案 1 :(得分:1)

在您的javascript代码中,您已初始化要禁用的删除按钮。你需要检查你从db ...

创建的项目符号数量

修改您的最后一个代码:

$('#btnDel').attr('disabled','disabled');

if($('.clonedInput2').length<=0){
   $('#btnDel').attr('disabled','disabled');
}