JavaScript code to enable - disable people editor control not working in Chrome and Firefox

Question

I have an application page in which two radio buttons and a people editor control is there.

My requirement is, if radio button "Yes" is checked then the people editor control should be enabled other wise it should be disabled.

My JavaScript code is:

<script type="text/javascript">
    $(document).ready(function(){   
        var radYes = document.getElementById("<%= rbtnReferralYes.ClientID %>");
        var radNo = document.getElementById("<%= rbtnReferralNo.ClientID %>");
        var peopleEditor = document.getElementById("<%= peReferralUsers.ClientID %>");
        $(peopleEditor).prop('disabled',true);
        $(radYes).click(function() {                    
            $(peopleEditor).prop('disabled',false);
        });
        $(radNo).click(function() {                 
            $(peopleEditor).prop('disabled',true);
        });
    });
</script>

My problem is that this code is working fine in IE but not working in Chrome and Firefox.

What am I missing?

Answer 1

You can it with .attr() like this:

$(peopleEditor).attr("disabled", 'disabled');

Or you can try to hide and show with .hide() and .show() but then its completely not visible.

EDIT: You have to check if your radiobutton is checked:

    $(peopleEditor).prop('disabled',true);
    $(radYes).click(function() {                    
       if($(radYes).is(':checked')) { 
          $(peopleEditor).prop('disabled',false);
       } 
    });
    $(radNo).click(function() {
       if($(radNo).is(':checked')) { {                 
          $(peopleEditor).prop('disabled',true);
       }
    });

Radiobuttons with jQuery

Or you can use only one Checkbox for enabeling/disabling the peopleEditor field