jQuery代碼無法在網站上運行，但會擺弄

Question

我有一個輸入列表，其中包含多個父div，每個父下都有多個子復選框。 僅有1個孩子等級（請參見下面的鏈接）

在每個父母下方，我都有一個復選框（必須使用復選框，而不是單選按鈕），並且應該只允許每個父母中的一個孩子被選中。

我正在小提琴上使用以下代碼-可以正常工作，但是將其應用於應用程序失敗，但是沒有顯示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

可能有2個問題...

1. 該代碼不在dom ready處理程序內
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（）

演示： 小提琴

Answer 2

可能是因為您沒有將代碼包裝在jsFiddle已經為您准備好的DOM 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 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);

});

在這里查看小提琴

希望能幫助到你！

Answer 7

我會嘗試使用“ on”而不是直接的“ click”，以確保您將處理程序附加到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);
});

對於：

$(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的建議添加了最接近的值