html code:

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

js code:

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

i need to select only one radio button at a time if radiobutton having name="assigned_proposal_id" is selected then it should not allow to select any radio buttons for name="local_proposal_id]" i cannot assign id different i need to do selection on the basis of name and i cant assign same name to separate group as well please tell me whats the solution

html code:

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

js code:

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

i need to select only one radio button at a time if radiobutton having name="assigned_proposal_id" is selected then it should not allow to select any radio buttons for name="local_proposal_id]" i cannot assign id different i need to do selection on the basis of name and i cant assign same name to separate group as well please tell me whats the solution

• javascript
• jquery
• jquery-mobile
• cordova

Share Improve this question Follow asked Oct 10, 2013 at 13:21 nidanida 65633 gold badges1616 silver badges3838 bronze badges 1

• its not fulfilling my requirement i dnt want to disable i want : when i select localPropid RADIO then if anyother radio from queue_proposal_id is checked then it should be unchecked and if queue_proposal_id is checked then all other radio buttons should be unchedked instead of disable – nida Commented Oct 11, 2013 at 5:43

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Checking / Unchecking in jQuery Mobile, you need to use .prop to checked or unchecked and then call .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');
  });
});

try the following

if($('input [name="assigned_proposal_id"]').is(':checked')){
    $('input [name="local_proposal_id"]').attr('disabled' , true)
}

$('input [name="assigned_proposal_id"]').click(function(){

if($('input [name="assigned_proposal_id"]').is(':checked')){ $('input [name="local_proposal_id"]').attr('disabled' , true) }

});

It will work like what hussain told

Here A FIDDLE for your purpose. It will uncheck all the radio button, then check the one we clicked on.

HTML :

<div id="localPropList">
<input name="assigned_proposal_id" type="radio" value="value1-1" />value1-1
<input name="assigned_proposal_id" type="radio" value="value1-2" />value1-2
<input name="assigned_proposal_id" type="radio" value="value1-3" />value1-3
</div>
<br/>
<div id="assignedPropList">
<input name="local_proposal_id" type="radio" value="value2-1" />value2-1
<input name="local_proposal_id" type="radio" value="value2-2" />value2-2
<input name="local_proposal_id" type="radio" value="value2-3" />value2-3
</div>
div selected : <span></span>

JQUERY :

$('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').change(function(){
    $('#localPropList input[name="assigned_proposal_id"], #assignedPropList input[name="local_proposal_id"]').prop('checked', false);
    $(this).prop('checked', true);
    $('span').html($(this).val());
});

     Disable Syntax:     
     $('input[name="name_here"]').attr('disabled', 'disabled');

 Don't go for the hardest thing 
Hussein Nazzal is correct but space matters    
between      input and '[' bracket 

if($('input[name="assigned_proposal_id"]:checked').val() != '')
{
$('input[name="local_proposal_id"]:radio').attr('disabled', 'disabled');
}

Demo

This worked for me, take into account that according to the selector this change will apply to all RadioButtons in the document with the same class, in this case class="chartIndex":

$(".chartIndex").change(function () {        
    $('[type=radio]:checked').prop('checked', false);
    $(this).prop('checked', 'checked');        
});

Hope this helps someone. Regards.