Question

我有一个输入列表，其中包含多个父级div，然后是每个父级下的多个子复选框。只有一个级别的孩子。（见下面的链接）

在每个家长下我都有复选框（必须使用复选框，而不是单选按钮），并且只允许在每个父母中选择一个孩子。

我在一个小提琴中使用以下代码 - 它运行正常，但将此应用于应用程序失败，但是没有错误的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

可能有两个问题......

代码不在dom ready handler
使用attr（）代替.prop（）来设置checked属性。

所以试试

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);
    });
})

注意：使用.closest（）

演示：Fiddle

Answer 2

可能是因为您没有将代码包装在jsFiddle已经为您完成的DOM就绪处理程序中，请尝试执行以下操作：

$(function() {
    $('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);
    });
});

Answer 3

在阅读你的评论后，我认为这可行：

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

Answer 4

我能想到的唯一原因是你的JS代码执行是在DOM构建之前发生的。将代码放在$(document ).ready(handler)中。结帐jquery文档以获取更多详细信息http://api.jquery.com/ready/

Answer 5

试试这个：

$(document).ready( function(){
    $('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);
    });
});

Answer 6

我认为这里的问题是某些选择器没有选择目标元素，或者如果你有正确的选择器（因为我不知道代码上实际发生了什么），试试我为你写的这个简单的代码。获得所需的逻辑和实现（如果我确实得到了你想要完成的东西）。

<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try
<input type="checkbox" class="check" name="trythis">try

$('input[type=checkbox]').on('click', function() { 
   var thisis = $(this);
   $('.check').each(function() { 
      $(this).prop('checked', false);
   });

    $(thisis).prop('checked', true);

});

查看fiddle此处

希望它有所帮助！

Answer 7

我会尝试使用“on”而不是直接“点击”，以确保您将处理程序附加到dom元素。尝试改变：

$('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);
});

for：

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

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

这是通过AJAX加载标记时发生的典型事情，我不知道是不是你的情况。我还添加了最接近的@Arun P Johny建议

Jquery代码不在网站上工作但在小提琴中工作

7 个答案: