How can I disable/enable a drop down embedded in a table mapped to a knockout observable array
I'd like to disable/enable a drop down embedded in a table in a form until a particular value is selected in the predecessor drop down.
Here's what I tried that doesn't seem to work:
<tbody data-bind="foreach:studentData">
<tr>
<td><span data-bind="text:rollNo"></span></td>
<td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
<td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
Please find the associated fiddle here
To give a brief I want the "Uniform Type" drop down in each of the rows to be enabled in case the option "Female" is selected in the "Sex" drop down and it needs to be disabled in all other scenarios.
knockout.js knockout-binding-handlers
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
add a comment |
I'd like to disable/enable a drop down embedded in a table in a form until a particular value is selected in the predecessor drop down.
Here's what I tried that doesn't seem to work:
<tbody data-bind="foreach:studentData">
<tr>
<td><span data-bind="text:rollNo"></span></td>
<td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
<td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
Please find the associated fiddle here
To give a brief I want the "Uniform Type" drop down in each of the rows to be enabled in case the option "Female" is selected in the "Sex" drop down and it needs to be disabled in all other scenarios.
knockout.js knockout-binding-handlers
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
add a comment |
I'd like to disable/enable a drop down embedded in a table in a form until a particular value is selected in the predecessor drop down.
Here's what I tried that doesn't seem to work:
<tbody data-bind="foreach:studentData">
<tr>
<td><span data-bind="text:rollNo"></span></td>
<td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
<td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
Please find the associated fiddle here
To give a brief I want the "Uniform Type" drop down in each of the rows to be enabled in case the option "Female" is selected in the "Sex" drop down and it needs to be disabled in all other scenarios.
knockout.js knockout-binding-handlers
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
I'd like to disable/enable a drop down embedded in a table in a form until a particular value is selected in the predecessor drop down.
Here's what I tried that doesn't seem to work:
<tbody data-bind="foreach:studentData">
<tr>
<td><span data-bind="text:rollNo"></span></td>
<td><select class="form-control" data-bind="options:$parent.sexDropDown,optionsText:'name',optionValue:'id',value:sex,optionsCaption:'-Select-'"></select></td>
<td><select class="form-control" data-bind="options:$parent.uniformTypeDropDown,optionsText:'name',optionValue:'id',value:uniform,enable:sex? (sex.id == 2):false,optionsCaption:'-Select-'"></select></td>
</tr>
</tbody>
Please find the associated fiddle here
To give a brief I want the "Uniform Type" drop down in each of the rows to be enabled in case the option "Female" is selected in the "Sex" drop down and it needs to be disabled in all other scenarios.
knockout.js knockout-binding-handlers
knockout.js knockout-binding-handlers
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
edited Nov 23 '18 at 12:54
Mohammadreza Farahani
2,06131424
2,06131424
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
asked Nov 23 '18 at 12:49
Suraj NairSuraj Nair
328315
328315
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
First, your sex and uniform properties have to be observable to allow for two way binding:
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
// ^^^^^^^^^^^^^^ ^ ^^^^^^^^^^^^^^ ^
// This allows the `value` binding to write to the property
]);
Then, in your enable binding, you can use the live-updating value:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447050%2fhow-can-i-disable-enable-a-drop-down-embedded-in-a-table-mapped-to-a-knockout-ob%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First, your sex and uniform properties have to be observable to allow for two way binding:
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
// ^^^^^^^^^^^^^^ ^ ^^^^^^^^^^^^^^ ^
// This allows the `value` binding to write to the property
]);
Then, in your enable binding, you can use the live-updating value:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
add a comment |
First, your sex and uniform properties have to be observable to allow for two way binding:
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
// ^^^^^^^^^^^^^^ ^ ^^^^^^^^^^^^^^ ^
// This allows the `value` binding to write to the property
]);
Then, in your enable binding, you can use the live-updating value:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
add a comment |
First, your sex and uniform properties have to be observable to allow for two way binding:
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
// ^^^^^^^^^^^^^^ ^ ^^^^^^^^^^^^^^ ^
// This allows the `value` binding to write to the property
]);
Then, in your enable binding, you can use the live-updating value:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
First, your sex and uniform properties have to be observable to allow for two way binding:
self.studentData = ko.observableArray([
{ rollNo: 1, sex: ko.observable(null), uniform: ko.observable(null) }
// ^^^^^^^^^^^^^^ ^ ^^^^^^^^^^^^^^ ^
// This allows the `value` binding to write to the property
]);
Then, in your enable binding, you can use the live-updating value:
enable: sex() ? (sex().id === 2) : false
// ^^ ^^
// Because this property is now observable, you need to call it to extract
// its value
In an updated fiddle: https://jsfiddle.net/ocd5qvr8/
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
answered Nov 23 '18 at 13:55
user3297291user3297291
15.8k11634
15.8k11634
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447050%2fhow-can-i-disable-enable-a-drop-down-embedded-in-a-table-mapped-to-a-knockout-ob%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
