CODEWITHSUNDEEP
jqueryhtml
Tsukimoto Mitsumasa
Tsukimoto Mitsumasa

Reputation: 582

Get the element using its attribute?

I have this,

<select id="rid" style="border: 1px solid #ccc;" name="rid">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

and i have this links that triggers an event,

<a href="#">Disable Option 1</a><br />
<a href="#">Disable Option 2</a><br />
<a href="#">Disable Option 3</a>

Now if I click Disable Option 1, this would disable Option 1 from the selection dropdown. I'm thinking, by using the attribute value, I can specify what option to disable with regards to what link I will click but I am lost. How would I disable any option on the dropdown just using the value attribute?

Upvotes: 1

Views: 102

Answers (4)

prakashpoudel
prakashpoudel

Reputation: 577

Please check this

HTML:

<a href="#">Disable Option <span>1</span></a><br />
<a href="#">Disable Option <span>2</span></a><br />
<a href="#">Disable Option <span>3</span></a>

Code:

$("a").click(function(){
   // if you want to enable previously disabled option then do this
   // $("#rid").find("option").removeAttr('disabled');

   $("#rid").find("option[value='"+$(this).find("span").html()+"']")
           .attr('disabled','disabled');
});

http://jsfiddle.net/66hyZ/14/

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

Edit:

like for instance when clicking Disable Option 1, it will disable options 1, 4 and 5 and when I click Disable Option 2 it will disable options 2 and 3, somewhat like that.

Setup links like below,

<a href="#" data-val="1,4,5">Disable Option 1</a><br />
<a href="#" data-val="2,3">Disable Option 2</a><br />
<a href="#" data-val="3">Disable Option 3</a>

And change code like below,

$('a').click (function () {
    var thisVal = $(this).data('val')+'';
    $('#rid option').filter(function () {            
        return $.inArray(this.value, thisVal.split(',')) >= 0;
    }).prop('disabled', true);
});

DEMO: http://jsfiddle.net/vPhJc/1/

If you setup links like below,

<a href="#" data-val="1">Disable Option 1</a><br />
<a href="#" data-val="2">Disable Option 2</a><br />
<a href="#" data-val="3">Disable Option 3</a>

Then you can 

$('a').click (function () {
    $('#rid option[value=' + $(this).data('val') + ']').prop('disabled', true);
});

DEMO: http://jsfiddle.net/vPhJc/

Upvotes: 9

iamvaruns
iamvaruns

Reputation: 83

why not give each link an id and then disable the option in the select box using the id value

Upvotes: 0

Fox32
Fox32

Reputation: 13570

JQuery supports selectors that can check for attribute values like [name="value"].

Upvotes: 1

Related Questions