Disabling checkbox and dropdown

Question

I am developing a calendar app for my website, and I am in a bit of a pickle. Here is the html for a part of the app I require help on:

<table border="0" cellpadding="2" cellspacing="4">
<tbody>
<tr>
<td class="main b_width"><strong>Repeat Every:</strong></td>
<td class="main width">

<select name="Day">

<option value="1" selected>no recurrence</option>
<option value="2">days</option>
<option value="3">weeks</option>
<option value="4">month by day</option>
<option value="5">month by week</option>

</select>

</td>
</tr>

<tr>
<td class="main b_width"><strong>At Days:</strong></td>
<td class="main b_width">

<select name="Day">

    <option value="1" selected>First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>

</select>

<input type="checkbox" name="Monday" ;>&nbsp;Mon&nbsp;

 </td>
</tr>

What i want to know is, the first select box that is created, for the first option 'no recurrence', how would I make all the other select boxes and check boxes inactive, disabling them so no data can be selected, Any help would be much appreciated

possible duplicate of How to disable multiple select options — Mark Schultheiss
– Mark Schultheiss, Commented May 3, 2013 at 16:10

palaѕн · Accepted Answer · 2013-05-03 16:13:06Z

1

Try this:

$('select[name=Day]').eq(0).change(function () {
    $('select[name=Day]').eq(1).prop('disabled', (this.value === '1'));
    $('input[name=Monday]').prop('disabled', (this.value === '1'));
}).change();

FIDDLE

answered May 3, 2013 at 16:13

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcelo Rodovalho · Accepted Answer · 2013-05-03 16:13:38Z

0

Try this way:

$("#Day").change(function(e){
        if($(this).val()=='1'){
            $("#Day2").attr("disabled","disabled");
        }
    });

answered May 3, 2013 at 16:13

Marcelo Rodovalho

9331 gold badge16 silver badges27 bronze badges

3 Comments

j08691 Over a year ago

a) There's no element with the ID of "Day" ($("#Day")) and b) how do you propose not disabling the other inputs should the user change the drop down again?

Marcelo Rodovalho Over a year ago

Is just a example, dont resolve the problem, but show the way.

j08691 Over a year ago

So you're saying your answer is just an example and not really an answer? Not to mention that it doesn't work.

agelber · Accepted Answer · 2013-05-03 16:14:29Z

0

You need to use javascript to acheive this.
Add the id recurrence to your first select box and the class recurrence-input to every element that you want to be disabled when no recurrence is chosen and use the following javascript (using jquery):

$('#recurrence').on('change', function() {} {
    if ($(this).val() === '1') {
        $('.recurrence-input').attr('disabled', 'disabled');
    } else {
        $('.recurrence-input').removeAttr('disabled');
    }
});

if no-recurrence is the default value for your select box then you should make the other inputs disabled when the document is loaded as well.

answered May 3, 2013 at 16:14

agelber

3041 silver badge4 bronze badges

Comments

j08691 · Accepted Answer · 2013-05-03 16:27:04Z

0

$('table :input:gt(0)').prop('disabled', true);
$('#recur').change(function () {
    $('table :input:gt(0)').prop('disabled', ($(this).val() == 1));
});

jsFiddle example

One problem with your example though is that you have multiple select elements with the same name. I updated your HTML to give them unique IDs. See the fiddle for the HTML.

edited May 3, 2013 at 16:27

answered May 3, 2013 at 16:09

j08691

209k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

Disabling checkbox and dropdown

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related