javascript - 如何使用 jquery 一次只选择一个具有不同名称的单选按钮？

Question

html代码:

<div id="localPropList"></div>
<div id="assignedPropList"> </div>

js代码:

function    getLocalProposals()
        {  // filling these radio buttons dynamically 

            var htmlStringLocalPro = '<fieldset id="local_proposal_id_div" name ="radioGroup" data-role="controlgroup">';
            for (var k = 0; k < result.rows.length; k++) {
              var localProposal = result.rows.item(k);
            if( !(jQuery.inArray( localProposal.id, arrForQueuePropId ) >=0 ) )
        {var fieldId = 'localPro' + k;
            htmlStringLocalPro += '<input group="1" type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + localProposal.enquiry_no + ',' + localProposal.id + '"/>'
                                          + '<label for="' + fieldId + '" data-iconpos="right">' + localProposal.enquiry_no+'-'+localProposal.caller_name+'</label>';
            }
     htmlStringLocalPro += '</fieldset>';
 }


   function  getAssignedproposals()
      {
     var htmlString = '<fieldset id="assigned_proposal_id_div"  name ="radioGroup" data-role="controlgroup">';
    for (var i = 0;i < obj.Proposal.length; i++) {
          proposalIds += obj.Proposal[i].id + ',';
      if( !(jQuery.inArray( obj.Proposal[i].id, arrForQueuePropId ) >=0 ) ){
                     var fieldId = 'ap' + i;
     htmlString += '<input group="1" type="radio" name="assigned_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
                      //  htmlString += '<input type="radio" name="local_proposal_id" id="' + fieldId + '" value="' + obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" data-iconpos="right">' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
                        }
                    }
    htmlString += '</fieldset>';}

     $("input:radio[name=local_proposal_id]:checked").each(function () {
       var prop = $(this).val().split(',');
 });
     $("input:radio[name=queue_proposal_id]:checked").each(function () {
           var prop = $(this).val().split(',');
});

我一次只需要选择一个单选按钮，如果选择了 name="assigned_proposal_id"的单选按钮，那么它不允许为 name="local_proposal_id] 选择任何单选按钮，我不能分配不同的 id 我需要根据名称进行选择，我也不能将相同的名称分配给单独的组请告诉我解决方案是什么

Answer 1

在jQuery Mobile中选中/取消选中，需要使用.prop来选中或取消选中，然后调用.checkboxradio('refresh')。

Demo

$(document).on('pageinit', function () {
  $(document).on('change', '[type=radio]', function (e) {

    // Uncheck radio buttons in #group1 and #group2
    $('#group1 [type=radio]:checked, #group2 [type=radio]:checked').prop('checked', false).checkboxradio('refresh');
    // "OR" to select all radio buttons in DOM
    $('[type=radio]:checked').prop('checked', false).checkboxradio('refresh');

    // Check clicked radio
    $(this).prop('checked', true).checkboxradio('refresh');
  });
});