How to enable or disable drop-down or text-box on selection other drop-down?

Question

<script>
$('#Select_Font').attr('disabled', 'true');
$('#Enter_Text').attr('disabled', 'true');
$('.dropdownstyle').change(function(){
    $(".dropdownstyle option:selected").text();
    if($(this).attr('value').match(/Custom$/)) 
    {
        $('#Select_Font').attr('disabled', 'false');
        $('#Enter_Text').attr('disabled', 'false');
    } else if($(this).attr('value').match(/no Thanks$/)) 
    {
        $('#Select_Font').attr('disabled', 'true');
        $('#Enter_Text').attr('disabled', 'true');
    }
});
</script>


<table>
<tbody>
<tr>
<td>
<span>Select type</span>
</td>
<td>
<select class="dropdownstyle">
    <option value="No Thanks">No Thanks</option>
    <option value="Custom lid (200)">Custom lid (200)</option>
</select>
</td>
</tr>
<tr>
<td>
<span>Select font</span>
</td>
<td>
<select id="Select_Font"> 
    <option value="Arial">Arial</option> 
    <option value="georgia">georgia</option> 
</select>
</td>
</tr>
<tr>
<td>
<span>enter text</span>
</td>
<td>
<input type="text" id="Enter_Text">
</td>
</tr>
</tbody>
</table>

In above code initially I want font drop-down and text-box disable but on select of custom form first drop-down I want font drop-down and text box to be enable. I am not sure where I am going wrong, so what should be done to make it work.

score 1 · Answer 1 · answered Mar 08 '13 at 18:52

You're using a string ('true', 'false') instead of a boolean (true, false). Try this:

<script>
$('#Select_Font').attr('disabled', true);
$('#Enter_Text').attr('disabled', true);
$('.dropdownstyle').change(function(){
    $(".dropdownstyle option:selected").text();
    if($(this).attr('value').match(/Custom$/)) 
    {
        $('#Select_Font').attr('disabled', false);
        $('#Enter_Text').attr('disabled', false);
    } else if($(this).attr('value').match(/no Thanks$/)) 
    {
        $('#Select_Font').attr('disabled', true);
        $('#Enter_Text').attr('disabled', true);
    }
});
</script>
....

Is this right`$(this).attr('value').match(/Custom$/)` or any other way is better to check ? — Pooja Desai, Mar 08 '13 at 19:07

Anujith · Accepted Answer · 2013-03-09T04:40:57.777

1

Try: SAMPLE

$('#Select_Font, #Enter_Text').attr('disabled', 'disabled');
$('.dropdownstyle').change(function () {
    var present = $(this).val().match(/\Custom\b/gi) == null ? true : false;
    if(present){
        $('#Select_Font, #Enter_Text').prop('disabled', 'disabled');
    }
    else{
        $('#Select_Font, #Enter_Text').removeAttr('disabled');
    }
});

$(this).attr('value') will return undefined. You should use $(this).val()

edited Mar 09 '13 at 04:40

answered Mar 08 '13 at 18:53

Anujith

9,370
6
33
48

Is this right $(this).attr('value').match(/Custom$/) or any other way is better to check ? – Pooja Desai Mar 08 '13 at 19:07
1

You're probably better using prop() instead of attr() http://stackoverflow.com/questions/5874652/prop-vs-attr – bgusach Mar 08 '13 at 21:24

score 0 · Answer 3 · answered Mar 08 '13 at 18:51

0

You should use:

$("#id").prop("disabled", true);

Or this also should work:

$("#id")[0].disabled = true;

In your code you are passing true and false as a string (first error) to the .attr() which is no longer used (second error)

answered Mar 08 '13 at 18:51

bgusach

14,527
14
51
68

How to enable or disable drop-down or text-box on selection other drop-down?

3 Answers3

Linked