当所有文本框在jquery中都有值时,如何启用按钮?

时间:2012-03-30 16:28:13

标签: javascript jquery-ui javascript-events jquery

我是编程新手。我已经描述了我的问题 我有一对两个文本框。一个文本框用于url,另一个用于指令,但所有文本框都是根据数据库的值动态创建的。

例如$ testing_type_id = 2所以我得到两对文本框,让它称为bundle。$ i用于唯一地识别文本框。

  <input type = "text"  size="33"   class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
             <input type = "text"  class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value=""  /> <br/>
             <input type="submit" name="checkout" id="checkout"   class="graybtn1 ptr  button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />

这里我想做的就是如果所有bundle都有值,无论是在一个文本框还是两个文本框中都这样启用提交按钮。如果我删除了值,那么使用jquery禁用提交按钮。

急需帮助。谢谢。

4 个答案:

答案 0 :(得分:6)

我认为这会起作用

$(document).ready(function(){
    $("input[class^='uploadtxt']").keyup(function(e){
        var alltxt=$("input[class^='uploadtxt']").length;
        var empty=true;
        $("input[class^='uploadtxt']").each(function(i){
            if($(this).val()=='')
            {
                empty=true;
                $('#checkout').prop('disabled', true);
                return false;
            }
            else
            {
                empty=false;
            }
        });
        if(!empty)  $('#checkout').prop('disabled', false);                    
    });
});​

一个例子是here

答案 1 :(得分:0)

if($('.uploadtxt1').val() !='' && $('.uploadtxt2').val() !='')
{
    $('#checkout').hide();
}
else
{
    $('#checkout').show();
}

答案 2 :(得分:0)

因此,如果textareas / inputs具有值,则假设您要显示/启用按钮。你可以使用jQuery做这样的事情。

$(window).ready(function(){

   if( $('input, textarea').val().length >=0 ){

     //run function to enable button

   }

   else if ( $('input, textarea').val().length <=0 ){

      //run function to disable button

   }

});

我认为这就是你在寻找的东西。如果我离开或者没有正确理解你,请告诉我。

答案 3 :(得分:0)

我将建议一个小的标记更改,以便轻松处理遍历。

将元素包裹在<div>

<div class="item">
    <input type = "text"  size="33"   class="uploadtxt1 url" name="txturl_<?php echo $testing_type_id ; ?>" id = "txturl_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value="" />
    <input type = "text"  class="uploadtxt2" size="33" name="txtinstruction_<?php echo $testing_type_id ; ?>" id = "txtinstruction_<?php echo $testing_type_id; ?>_<?php echo $i ; ?>" value=""  /> <br/>
    <input type="submit" name="checkout" id="checkout"   class="graybtn1 ptr  button_float_left_checkout" disabled="disabled" value="Proceed To Checkout" />
</div>

然后,在change事件

上附加一个片段
$("input[type=text]", $(".item")).change(function() {
    var allField = true;
    $(this).closest(".item").find("input[type=text]").each(function() {
         allField = allField && ($(this).val().length > 0)
    });
    if(allField) {
        $(this).closest(".item").find("input[type=submit]").prop('disabled', false);
    }
});

Demo of Working Solution