隐藏按钮取决于文本框是否有文本与jQuery?

时间:2010-07-20 01:19:35

标签: jquery

我有几个日期时间选择器字段,如果其中任何一个为空,我希望提交按钮不可见。我知道如何做到这一点但不知道如果所有日期时间选择器字段都包含文本,如何使按钮可见。

我已经看过使用keyup的exmaples但是当我使用datetime选择器时,我从未将光标放在文本框中并键入内容,日期时间选择器会填充该字段。

该按钮的名称以diidIOSaveItem结尾。我不能在日期时间选择器中使用ID或名称。

if ($("input[title='Target Date']").val().length < 1)
{
$("input[name$='diidIOSaveItem']").hide();
}
else
{
$("input[name$='diidIOSaveItem']").show();
}

如果没有设定目标日期,则会隐藏按钮。如果在现场有什么东西我怎么显示按钮我怎么把它放在那里?

提前致谢。

更新

我知道:

$("input[title='Start Date']").bind('keyup keydown change', function () {
  if ($(this).val() == '') {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("input[title='Target Date']").bind('keyup keydown change', function () {
  if ($(this).val() == '') {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("select[title='Strategic Objective']").bind('keyup keydown change', function () {
  if ($(this).val() == 0) {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

$("select[title='Strategic Priority']").bind('keyup keydown change', function () {
  if ($(this).val() == 0) {
    $("input[name$='diidIOSaveItem']").hide();
  } else {
    $("input[name$='diidIOSaveItem']").show();
  }
}).change();

如果我没有在其中一个下拉列表中选择任何内容,则隐藏按钮。但是,如果我在下拉列表中选择某些内容,即使日期时间选择器字段为空,该按钮也会变为可见。建议?

2 个答案:

答案 0 :(得分:0)

如果你真的希望它是即时的(任何一个条目让它显示出来,一旦你清除输入就会消失)我会这样做:

$.fn.extend({
  vals: function () {
    var retVals = []; 

    this.each(function () {
      retVals.push($(this).val())
    }); 

    return retVals; 
  }
});

var myInputs = "input[title='Target Date'], input[title='Start Date'], select[title='Strategic Objective']";

$(myInputs).bind('keyup keydown change', function () {
  var entries = $(myInputs).vals();

  for (i in entries) {
    if (entries[i] == '') {
      $("input[name$='diidIOSaveItem']").hide();
      return;
    }
  }

  $("input[name$='diidIOSaveItem']").show();
}).change();

使用更新的示例,您可以使用vals()来获取所有输入值的数组。为了使其与选择元素一起使用,您需要第一个选项如下所示:<option value=''> </option>。我认为这应该非常接近。

答案 1 :(得分:0)

对于字段本身的更改,您始终可以收听事件:

$("input[title='Target Date']").bind('change keyup',function(){
  $("input[name$='diidIOSaveItem']").toggle($(this).val()!='');
});

对于在字段中设置的值,请​​在change()字段上触发input。 E.g。

$("#setvalue").click(function(){  
  $("input[title='Target Date']").val("hello"); // Set a value
  $("input[title='Target Date']").change(); // Force the change event
});

Code in action.