Question

现在我正在解决一个巨大的谜团，为什么JQUery不会在我的RoR Web应用程序中显示我的隐藏输入。这段代码可能不太好（我对JQuery或JS很新）但是我想知道为什么它不会显示我的隐藏元素，而是用我想要的逻辑更改标签，即使它在同一个代码块中。

你有什么合理的解释为什么checkbox.show（）;不会显示元素？我是否必须选择具有不同选择器的复选框或类似的东西？ JQuery代码：

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.val("0");
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }
      });
  });

这个复选框是由simple_form gem生成的，所以它看起来像这个= f.input :halfday, label: "Is this a halfday event?", :default => false，生成的http是：

<div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
    <label class="boolean optional checkbox" for="event_halfday">
        <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />Is this a halfday event?</label>
</div>
</div>

感谢您的回复和时间。祝你有愉快的一天！

Answer 1

您可以尝试更改此内容：

if($('#event_halfday').attr('type') == 'hidden') {

到此：

if($('#event_halfday:visible').length == 0) {

或

if($('#event_halfday').is(':hidden')) {

所以对我来说你的最终代码应该是这样的：

$(document).ready(function () {
      var checkbox = $('#event_halfday');
      $('#others #event_start_at').datepicker().on('changeDate', function () {
          var start = $('#others #event_start_at').val();
          var end = $('#others #event_end_at').val();

          if(start != end && checkbox.is(':visible')) {
              checkbox.val("0");
              checkbox.hide();
              $("label[for='event_halfday']").text("You can't .....")
          } else {
              $("label[for='event_halfday']").text("Is this a ...")
              checkbox.show();
          }
      });
  });

更新

使用&&代替if中的其他if更改您的if条件：

if(start != end && checkbox.is(':visible')) {

Answer 2

所以我用这段代码解决了这个问题：

$(document).ready(function () {
var checkbox = $('#event_halfday');
$('#others #event_start_at').datepicker().on('changeDate', function(){
  var start = $('#others #event_start_at').val();
  var end = $('#others #event_end_at').val();
  if(start != end && checkbox.is(':visible')){
    checkbox.val("0");
    checkbox.css('display','none');        
  } else {
    checkbox.css('display','block');

          }
}); 
});

问题还在于更改此输入的标签。当我更改时，复选框不会再次显示。谢谢大家！

Answer 3

根据你的要求......我认为这就是你想要的：

if(checkbox.is(':visible')){ //do things }
else { checkbox.show(); }

基本检查程序示例：http://jsfiddle.net/9yfkd/1/

Answer 4

那是因为.show（）使用CSS显示项目，所以如果你使用CSS隐藏了一个元素（通过display: none），。show（）将应用display: block。但是，您的元素通过type属性显式隐藏，因此CSS在此上下文中无关紧要。要显示该项目，您可能需要这样做：

checkbox.attr('type', 'radio');

Answer 5

隐藏的输入字段应该保持隐藏。我认为你想要做的是使用类型文本的普通输入字段并使用css隐藏它。然后你就可以使用jQuery来显示它了。

然后，其余代码show()/hide()的复选框将相应地生效。

Answer 6

检查FIDDLE

** HTML **

      <div class="form-group boolean optional event_halfday">
    <input name="event[halfday]" type="hidden" value="0" />
     <input class="boolean optional" id="event_halfday" name="event[halfday]" type="checkbox" value="1" />
    <label class="boolean optional checkbox" for="event_halfday">
       Is this a halfday event?</label>
</div>
</div>

** Jquery **

    var checkbox = $('#event_halfday');
var start = "01-04-2014";
          var end =  "05-04-2014";
          if(start != end) {
              if($('#event_halfday').attr('type') == 'hidden') {}
              else {
                  checkbox.hide();
                  $("label[for='event_halfday']").text("You can't create event where From: is not the same as To: as a halfday.")
              }
          }
          else {
              $("label[for='event_halfday']").text("Is this a halfday event?")
              checkbox.show();
          }

Answer 7

试 $checkbox.show(); $checkbox.hide(); $checkbox.value(0

在.show（）之后，JQuery无法显示隐藏元素（复选框）

7 个答案:

更新