CODEWITHSUNDEEP
jquery
Si8
Si8

Reputation: 9225

Enable/Disable using Radio is not working

I am trying to disable/enable dropdown box based on user selection of radio buttons. I have the following JSFiddle: JSFiddle which works fine on it's own.

$('input[type=radio]').click(function() {
    var r_id = $("input[@name=sc]:checked").attr('id');
    alert(r_id);

    if (r_id == "bName") {
        //enable By Name drop down
        $(".dName").prop('disabled', false);
        //disable By Specialty drop down
        $(".dSpecialty").prop('disabled', true);
    }
    if (r_id == "bSpecialty") {
        //enable By Specialty drop down
        $(".dSpecialty").prop('disabled', false);
        //disable By Name drop down
        $(".dName").prop('disabled', true);
    }
});

The same exact code in the following page is not working: Website Demo

Upvotes: 0

Views: 312

Answers (4)

Albinoswordfish
Albinoswordfish

Reputation: 1957

I just ran your code on my local XAMPP server. It appears the the issue is coming from the chosen.jquery.js file. If I remove this script from your example.jquery.html you get the intended behavior.

What's happening is that you start out with a <select> tag with all the options which your JS works fine for. However this chosen.jquery.js creates a <div> block in place of this <select> tag. The 'disabled' property no longer applies to this newly built <div> block.

Reference: How should disabled <div> act?

This chosen.jquery.js file looks like some third party custom drop down box. Not sure if the functionality is there already to disable this, you probably need to check the API. If not you need to create a custom CSS class for this div to make it appear faded.

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

Can you simplify with:

$('input[type=radio].searchCriteria').click(function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

MIGHT be better: use the change handler (jQuery newer versions):

$('input[type=radio].searchCriteria').on('change',function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

Prior versions of jQuery without '.on' (direct)

$('input[type=radio].searchCriteria').change(function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

OR if you need for dynamic elements (use wrapper div etc. not "document" if possible)

$(document).delegate('input[type=radio].searchCriteria','change',function () {
    $('.chzn-select').prop('disabled', true);//disable all
    $(this).next('.chzn-select').prop('disabled', false);//enable sibling
});

Upvotes: 1

Ligth
Ligth

Reputation: 330

type, name, id and class atributes must be wrapped with double quotes. Updated code: jsfiddle.

<input type="radio" name="sc" id="bName" class="searchCriteria checked" />

Update

In this part of the code

if (r_id == "bSpecialty") {
            //enable By Specialty drop down
            $(".dSpecialty").prop('disabled', false);
            //disable By Name drop down
            $(".dName").prop('disabled', true);
    }

Replace it for

  if (r_id == "bSpecialty") {
                //enable By Specialty drop down
                $(".dSpecialty").removeAttr('disabled');
                //disable By Name drop down
                $(".dName").Attr('disabled', true);
        }

And tell me want happen

Upvotes: 0

Pieterjan
Pieterjan

Reputation: 475

I think a point specifies a class name, and 

class="chzn-select dSpecialty" name="dSpecialty"

has another name to it... You could try changing that

Upvotes: 1

Related Questions