I have a jquery question about selecting Id.

Basically, I call a javascript function from an onClick function which I pass in control Id and LabelId.

If I use document.getElementById, it will work, however, if I use jQuery selector, it's NOT working.

<script type="text/javascript">
    jQuery.noConflict();
    function ToggleProgressEnable(valueofRadio, controlId, labelId) {

//Comments: the following will work.  
//        var control = document.getElementById(controlId);
//        var label = document.getElementById(labelId);

//The following is not working.
        var control = jQuery("'#" + controlId + "'");
        var label = jQuery("'#" + labelId + "'");
        if (control != null && label!=null) {
            //alert(control.Id);
            //alert(control.disabled);
            if (valueofRadio == "yes") {
                control.disabled = false;                
                label.disabled = false;
            }
            else if (valueofRadio == "no") {
            control.disabled = true;
            control.value = "";
            label.disabled = true;
            }
            //alert(control.disabled);
        }
    }    
</script>

I have a jquery question about selecting Id.

Basically, I call a javascript function from an onClick function which I pass in control Id and LabelId.

If I use document.getElementById, it will work, however, if I use jQuery selector, it's NOT working.

<script type="text/javascript">
    jQuery.noConflict();
    function ToggleProgressEnable(valueofRadio, controlId, labelId) {

//Comments: the following will work.  
//        var control = document.getElementById(controlId);
//        var label = document.getElementById(labelId);

//The following is not working.
        var control = jQuery("'#" + controlId + "'");
        var label = jQuery("'#" + labelId + "'");
        if (control != null && label!=null) {
            //alert(control.Id);
            //alert(control.disabled);
            if (valueofRadio == "yes") {
                control.disabled = false;                
                label.disabled = false;
            }
            else if (valueofRadio == "no") {
            control.disabled = true;
            control.value = "";
            label.disabled = true;
            }
            //alert(control.disabled);
        }
    }    
</script>

• javascript
• jquery

6 Answers 6

var control = jQuery("'#" + controlId + "'");        
var label = jQuery("'#" + labelId + "'");

you're doing your selectors wrong. get rid of your single quotes and just use your double quotes:

var control = $("#" + controlId);        
var label = $("#" + labelId);

Try

jQuery('#' + controlId);

Otherwise, you're searching for '#controlId', which is not a valid selector.

Maybe this:

var control = jQuery("#" + controlId);
var label = jQuery("#" + labelId);

You are receiving a jQuery object, not a DOM element. You should use:

control.val()

for example to get the value...

Oh and i second Jasons answer:

jQuery('#' + controlId);

should do fine...

    var control = jQuery("#" + controlId);

I would suggest passing the controlId and labelId as selectors or elements rather than as strings. Take full advantage of the fact that you can pass objects as arguments.

var control = $('#myControl');
var label = $('#myLabel');

ToggleProgressEnable(5, control, label);