0

动态添加元素的 jQuery 选择器似乎不起作用。简而言之，我有一组带有功能的复选框。PHP 为要添加的每一行数据创建一个 add(..) 条目（在本例中是一个文件名、注释和用于删除它的复选框）。这些是使用硬编码模板添加的，效果很好。我不会发布添加脚本，但它会生成类似的条目（为简洁而修改）......

<tr>
  <td class="cell-file"><a href="...">afile.jpg</a></td>
  <td class="cell-comment">A comment</td>
  <td class="cell-remove a-center last"><input type="checkbox" id="...is_delete" name="...is_delete" value="1" class="removable"></td>
</tr>

在另一个复选框的状态更改时，我需要将所有动态添加的复选框设置为选中（并禁用按钮），并使用以下... 

function setAddButton(arg){
if(arg){
    $('add-attachment').addClassName('disabled');
    Event.stopObserving('add-attachment', 'click');
    // Check all removable checkboxes
    $('input.removable:checkbox').attr('checked', true);
}else{
    $('add-attachment').removeClassName('disabled');
    Event.observe('add-attachment', 'click', orderAttachment.add.bind(orderAttachment));
}
}

问题是选择器$('input.removable:checkbox')返回 null。我尝试了各种形式的这个选择器，包括$('.removable:checkbox')&$('input:checkbox.removable')但没有选择任何内容。

各种帖子都说这个选择器应该可以工作，但事实并非如此。所以我假设这是因为 jQuery 无法“看到”动态添加的元素。我已经阅读了有关使用 .live() 或 .on() 的各种帖子，但这是关于将事件处理程序添加到动态添加的元素。我不想要一个事件处理程序，我只想能够选择和设置动态添加的复选框的选中属性。

有任何想法吗？

4

4 回答 4

0

要检查一个复选框，你可以使用prop而不是attr
属性prop是 jquery.1.6+，如果你使用的是劣质版本，你必须使用attr 试试这个：

$('input.removable:checkbox').prop('checked', true);
于 2013-08-20T10:53:33.410 回答
0

checked类似true的使用attr，

//checked in place of true
$('input.removable:checkbox').attr('checked', 'checked');

你可以使用prop喜欢

$('input.removable:checkbox').prop('checked', true);
于 2013-08-20T10:57:59.487 回答
0

您的 jquery 版本 > 1.6请参见此处

$('input.removable:checkbox').prop('checked', true);

你的 jquery 版本 <= 1.6

$('input.removable:checkbox').attr('checked', true);

或者你可以使用

$('input.removable:checkbox').attr('checked', "checked");
于 2013-08-20T11:14:39.730 回答
0

好的，所以这个网站的问题是它是带有第 3 方主题和我正在修改的第 3 方扩展的 Magento。该站点同时使用 Prototype 和 jQuery。[我认为 Prototype 是 jQuery 的超集，但似乎不是！] Protptype 添加了动态复选框，而标准的 jQuery 选择器不适用于这些。

在这种情况下，虽然$('add-attachment').addClassName('disabled');有效，$('input.removable:checkbox')但无效。Prototype 的正确（或至少一种工作）语法是：

$$('input[class="removable"]').each(function(element) {
    element.checked = true;
});

我创建了一个简单的测试来弄清楚发生了什么，如下所示，以防它帮助任何人。我想要的另一件事是如果选中“控制”复选框，则防止取消选中删除复选框，同时仍显示和发布状态。解决方案很简单，但实现起来很棘手——单独使用 Prototype 的方法在与 jQuery 一起使用时不起作用。该解决方案仅适用于 Prototype，也适用于 jQuery。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
  </head>

  <body>
    <div id="checkboxes">
      <div id="cbcontrol">
        <input type="checkbox" id="cb1" name="cb1" onclick="forceIt(this.checked)"/>
        <label for="cb1">Check this to force-check the others</label>
      </div>
      <div id="cbhard">
        <input type="checkbox" id="cb2" name="cb2" class="cb" onclick="fixIt(this)"/>
        <label for="cb2">Checkbox hard coded</label>
      </div>
      <div id="cb-template" style="display:none">
        <input type="checkbox" id="#id#" name="#name#" class="cb" onclick="fixIt(this)"/>
        <label for="#id#">Checkbox dynamic</label>
      </div>        
    </div>

    <script type="text/javascript">
       // Add a checkbox dynamically using the template
       var cbtemplate = $('cb-template').innerHTML;
       var templateSyntax = /(^|.|\r|\n)(#(\w+)#)/;
       var template = new Template(cbtemplate, templateSyntax);
       data = {};
       data.id  = 'cb2';
       data.name  = 'name';
       Element.insert('cb-template', {'before':template.evaluate(data)});

       // Force checkbox states
       function forceIt(state) {    
         $$('input[class="cb"]').each(function(cb) { cb.checked = state; });
       }

       // Keep checkboxes checked
       function fixIt(cb) {
         if ($('cb1').checked) {
           cb.checked=!cb.checked;
         }
       }
     </script>
   </body>
 </html>
于 2013-08-20T16:54:33.490 回答