javascript - Jquery 代码无法在网站上运行，但可以在 fiddle 中运行

Question

我有一个输入列表，其中有多个父级 div，然后每个父级下有多个子级复选框。只有 1 级 child 。(请参阅下面的链接)

在每个父级下，我都有复选框(必须使用复选框，而不是单选按钮)，并且应该只允许在每个父级中选择一个子级。

我在 fiddle 中使用以下代码 - 它工作正常，但将其应用到应用程序失败，但 chrome 没有显示错误来调试正在发生的事情...

$('input[type=checkbox]').click(function () {
    var checkedState = $(this).attr("checked");
    $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
    $(this).attr("checked", checkedState);
});

可以在这里找到我想要实现的目标的工作示例:http://jsfiddle.net/EYtx8/

可以在这里找到无法运行的开发站点: http://protoys.gentex.com.au/Products/Catalogue (我知道页面加载很慢)，您会注意到所有复选框都可以选中，这是我试图避免的。

作为旁注，人们提到它不在 DOM 内。但是一个包裹在一个

$(document).ready(function() { 

这是开发网站上的完整脚本

<script>

$(document).ready(function() {

//Update the is in stock flag, by altering the criteria input fields.
$("input[[id*='chkInStock']]").change(function() {
    if ($("input[[id*='chkInStock']]").prop('checked') == true) $("input[[id*='nbs-min']]").val('1');
    if ($("input[[id*='chkInStock']]").prop('checked') == false) $("input[[id*='nbs-min']]").val('0');
});

if ('[Settings:chktextsearch]'=='False')
{
    // ALL Text search is turned off in the settings, so use JS to update the "disabledsearchtokens" for all text search tokens -->
    var disabledlist = $("input[[id*='disabledsearchtokens']]").val();
    if (disabledlist.indexOf('search0;') == -1) disabledlist = disabledlist + 'search0;';
    if (disabledlist.indexOf('search1;') == -1) disabledlist = disabledlist + 'search1;';
    if (disabledlist.indexOf('search2;') == -1) disabledlist = disabledlist + 'search2;';
    if (disabledlist.indexOf('search3;') == -1) disabledlist = disabledlist + 'search3;';
    if (disabledlist.indexOf('search4;') == -1) disabledlist = disabledlist + 'search4;';
    if (disabledlist.indexOf('search5;') == -1) disabledlist = disabledlist + 'search5;';
    if (disabledlist.indexOf('search6;') == -1) disabledlist = disabledlist + 'search6;';
    if (disabledlist.indexOf('search7;') == -1) disabledlist = disabledlist + 'search7;';
    if (disabledlist.indexOf('search8;') == -1) disabledlist = disabledlist + 'search8;';
    // Update disabled fields to the postback field -->
    $("input[[id*='disabledsearchtokens']]").val(disabledlist);
   }

   $('input[type=checkbox]').click(function () {
      var checkedState = $(this).attr("checked");           

     $(this).parent().parent().parent().parent().parent().find('input[type=checkbox]:checked').removeAttr("checked");
   $(this).attr("checked", checkedState);
    });

    $('label').each(function () {
       var $this = $(this);
      $this.html($this.text().replace(/^(\.+)/g, '<span style="display:none">$1</span><span     class="Child">'));
         });
     });

    </script>

如有任何帮助，我们将不胜感激。

Answer 1

可能有两个问题...

1. 代码不在 dom 就绪处理程序内
2. 使用 attr() 而不是 .prop() 来设置选中的属性。

所以尝试一下

jQuery(function ($) {
    $('input[type=checkbox]').click(function () {
        //if the markup in the jsfiddle is same as the one in your page then try
        $(this).closest('table').find('input[type=checkbox]:checked').not(this).prop("checked", false);
    });
})

注意:不要使用链式 .parent() 调用，而是使用 .closest()

演示:Fiddle