選擇複選框並使用jQuery啓用相應的單選按鈕

我有一個複選框列表，其中包含6個複選框。相應的單選按鈕放置在每個複選框旁邊。當頁面加載時，單選按鈕被禁用。當我選中複選框時，我想啓用旁邊的單選按鈕。此外，如果我取消選中複選框，旁邊的單選按鈕將被取消選中並再次禁用。選擇複選框並使用jQuery啓用相應的單選按鈕

該複選框供用戶選擇他們想要的物品，單選按鈕供用戶選擇他喜歡的物品。

下面我曾嘗試這個代碼，但它是不工作...

$(document).ready(function() { 
    $("#rbtnlLeadAgencies input[type='radio']").each(function() { 
     $("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true); 
    }); 
    $("#cbxlAgencies input[type='checkbox']").each.change(function() { 
     if ($("#cbxlAgencies_0 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_0 input[type='radio']").prop('disabled', false); 
     if ($("#cbxlAgencies_1 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_1 input[type='radio']").prop('disabled', false); 
     if ($("#cbxlAgencies_2 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_2 input[type='radio']").prop('disabled', false); 
     if ($("#cbxlAgencies_3 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_3 input[type='radio']").prop('disabled', false); 
     if ($("#cbxlAgencies_4 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_4 input[type='radio']").prop('disabled', false); 
     if ($("#cbxlAgencies_5 input[type='checkbox']").is(':checked')) $("#rbtnlLeadAgencies_5 input[type='radio']").prop('disabled', false); 
    }); 

});

的標記和jQuery代碼都在jsfiddle

實現這一行爲的任何想法？

在此先感謝！

來源

2013-08-30 Litash

你也可以在你的html中使用像data-for-radio =「rbtnlLeadAgencies_3」'這樣的自定義屬性，並在複選框上添加一個onchange事件來修改相關的廣播。更快速和明確的ID鏈接。 – TecHunter

@TecHunter這些HTML由asp.net從複選框列表服務器控件生成。可以添加onchange事件來觸發jQuery函數，如 AAA？ – Litash

如果它是生成的，然後考慮最通用的方法來做到這一點，你會看到不同的時候維護或添加新的鏈接複選框等....更具體，更通用的最佳組合來自生成的頁面。我不知道ASP sry – TecHunter

嘗試

$(document).ready(function() { 
    $("#rbtnlLeadAgencies input[type='radio']").prop('disabled', true); 

    $("#cbxlAgencies input[type='checkbox']").change(function() { 
     var idx = $(this).closest('tr').index(); 
     var radios = $("#rbtnlLeadAgencies tr").eq(idx).find('input[type="radio"]').prop('disabled', !this.checked); 

     if(!this.checked){ 
      radios.prop('checked', false); 
     } 
    }); 

});

演示：Fiddle

來源

2013-08-30 08:48:44

謝謝先生，我喜歡你使用.closest（'tr'）的風格。index（） – Litash

@Litash我對自動取消選擇代碼 –

DEMO

$(document).ready(function() { 
    $('input:radio[id^="rbtnlLeadAgencies_"]').prop('disabled', true); 
    $('input:checkbox[id^="cbxlAgencies"]').change(function() { 
     var id = this.id.replace('cbxlAgencies_', ''); 
     $("#rbtnlLeadAgencies_" + id).prop('disabled', !this.checked); 
    }); 
});

^ attribute-starts-with-selector

來源

2013-08-30 08:48:10

感謝您告訴我attribute-starts-with-selector。我正在嘗試與您的代碼類似的邏輯，但我不知道如何獲取ID。：D – Litash

@Litash歡迎:)幫忙:) –

-1

嘗試jsfiddle code。

$(document).ready(function() { 
    $("#rbtnlLeadAgencies input[type='radio']").attr('disabled', true); 
    $("#cbxlAgencies input[type='checkbox']").change(function() { 
      $("#rbtnlLeadAgencies_0").prop('disabled', !this.checked); 
      $("#rbtnlLeadAgencies_1").prop('disabled', !this.checked); 
      $("#rbtnlLeadAgencies_2").prop('disabled', !this.checked); 
      $("#rbtnlLeadAgencies_3").prop('disabled', !this.checked); 
      $("#rbtnlLeadAgencies_4").prop('disabled', !this.checked); 
      $("#rbtnlLeadAgencies_5").prop('disabled', !this.checked); 
    }); 

});

來源

2013-08-30 09:00:34

做了一些修改，因爲這個而不工作 – TecHunter

正如我在這裏我的評論說的是這是在標記一個有點貴，但更通用的解決方案：

HTML

<input id="cbxlAgencies_0" data-for-radio="rbtnlLeadAgencies_0" type="checkbox"/>

$(document).ready(function() { 
    $("input[type='checkbox'][data-for-radio]").change(function() { 
     $('#' + $(this).data('for-radio')).prop('disabled', !this.checked); 
    }).change(); 

});

http://jsfiddle.net/techunter/7M54h/

來源

2013-08-30 09:22:11 TecHunter

選擇複選框並使用jQuery啓用相應的單選按鈕

回答

相關問題