[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

jQuery: Disable select options where value begins with xyz

Posted on 2013-10-28
5
Medium Priority
?
528 Views
Last Modified: 2013-10-28
Using jQuery, how can I disable all select options that begin with "xyz"?

In this example, only the last 3 options should be disabled:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">

option:disabled {
background: red;
opacity: 0.3;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

 $('#xyz option').prop('disabled',true)

});
</script>

</head>
<body>
 <div>
  <select id="xyz">
   <option value="xyz">xyz</option>
   <option value="abc">abc</option>
   <option value="123" selected="selected">123</option>
   <option value="xyz1">xyz1</option>
   <option value="xyz2">xyz2</option>
   <option value="xyz3">xyz3</option>
  </select>

 </div>
</body>
</html>

Open in new window

0
Comment
Question by:hankknight
  • 3
  • 2
5 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39605418
$('#xyz option').each(function(){
  var val=$(this).val();
  var n=val.substring(0,3);

  if(n=='xyz'){
   $(this).prop('disabled',true); 
  }

});

Open in new window

http://jsbin.com/ELArIwI/1/edit?html,js,output
0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 2000 total points
ID: 39605439
or

change
$('#xyz option').prop('disabled',true)

Open in new window


to
$('#xyz option[value^="xyz"]').prop('disabled',true)

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39605469
I'm sure we can come up with even more multiple permutations of the same answer.  PierreC, what is the  point of changing to that permutation?  Is it better? or just different?
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39605486
you tell me, padas.

What is easier?
adding "[value^="xyz"]" to already exisiting code

or reinventing the wheel?

Is it better to
ask JQuery for a list of items and then finding those we are interested in, or
ask JQuery for the list we are interested in
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39605521
Good point
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month20 days, 2 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question