Tech
Forums
Jobs
Books
Events
Videos
Live
More
Interviews
Certification
Training
Career
Members
News
Blogs
Contribute
An Article
A Blog
A Video
An Ebook
An Interview Question
Register
Login
3
Answers
Disabling and Enabling text box based on selection option
venance haule
7y
259
1
Reply
i'm developing a system about group registration, i have four category of groups, which are men group, women group, youth group and both group (men and women)
during registration of groups at the category there is selection option where a user can choose either group, and below that selection option i have two text box, one text box is to enter number of men and other text box is to enter number of women, by default they are disabled, what i want is if user choose men category, only the textbox for men should be active, and if user choose women category only the textbox for women should be active, if a user choose both or youth category all the text box should be active. below is my code please help
$(document).on(
'change'
,
'#combo'
,
function
(){
var
shouldEnable = $(
this
).val() !==
'Men'
;
$(
'#input1'
).prop(
'disabled'
, shouldEnable);
});
<
div
class
=
"form-group"
>
<
label
for
=
"category"
class
=
"col-sm-2 control-label"
>
Group Category
</
label
>
<
div
class
=
"col-sm-3"
>
<
select
class
=
"form-control"
name
=
"category"
id
=
"combo"
>
<
option
value
=
""
>
Select Category
</
option
>
<
option
value
=
"Men"
>
Men
</
option
>
<
option
value
=
"Women"
>
Women
</
option
>
<
option
value
=
"Youth"
>
Youth
</
option
>
<
option
value
=
"Both"
>
Both
</
option
>
</
select
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"name"
class
=
"col-sm-2 control-label"
>
Number Of Men
</
label
>
<
div
class
=
"col-sm-8"
>
<
input
type
=
'text'
size
=
'5'
name
=
"man"
id
=
"input1"
value
=
""
class
=
'input'
disabled
>
</
input
>
</
div
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"name"
class
=
"col-sm-2 control-label"
>
Number Of Women
</
label
>
<
div
class
=
"col-sm-8"
>
<
input
type
=
'text'
size
=
'5'
name
=
"woman"
id
=
"input2"
value
=
""
class
=
'input'
disabled
>
</
input
>
</
div
>
</
div
>
Post
Reset
Cancel
Answers (
3
)
Next Recommended Forum
how to calculate number of months and days in javascript
How to focus all the text filed at the same time??