We Keep Coding

How to automatically select checkboxes if user input in "wall_amount" exceeds 3

I would like my program to automatically select all checkboxes (Specifically "Side 1, Side 2, Side 3 and Side 4") if the wall_amount input is above 3. How would this be done?
I have tried this on javascript lines 10-12. Thanks
HTML
<label for="wall_amount">Number of Walls</label>
<input type="number" value="1" min="1" max="4" step="1" id="wall_amount" name="wall_amount"></input>
<div>
Please choose where you want the walls placed
<label for="wall_side1">Side 1</label>
<input type="checkbox" id="wall_side1" name="wall_side1"></input>
<div style="display: inlineblock;">
<label for="wall_side2">Side 2</label>
<input type="checkbox" id="wall_side2" name="wall_side2"></input>
<img class="img2" src="images/reference.png" alt="Bouncy Castle">
<label for="wall_side3">Side 3</label>
<input type="checkbox" id="wall_side3" name="wall_side3"></input>
</div>
<label for="wall_side4">Side 4</label>
<input type="checkbox" id="wall_side4" name="wall_side4"></input>
</div>
Javascript
var base_length = Number(document.getElementById("base_length").value);
var base_width = Number(document.getElementById("base_width").value);
var walltype = Number(document.getElementById("walltype").value);
var checkbox_side1 = document.getElementById("wall_side1");
var checkbox_side2 = document.getElementById("wall_side2");
var checkbox_side3 = document.getElementById("wall_side3");
var checkbox_side4 = document.getElementById("wall_side4");
var wall_amount = Number(document.getElementById("wall_amount").value);
$("input:checkbox").click(function() {
let max = $("#wall_amount").val();
var bol = $("input:checkbox:checked").length >= max;
$("input:checkbox").not(":checked").attr("disabled", bol);
});
$("wall_amount").on('keyup', function () {
$('checkbox_side1').prop('checked', +$(this).val() > 3);
});

You can use the function setAttribute to check checkboxes. For example, this code (based on your example) will check your element with the id wall_side1.
checkbox_side1.setAttribute("checked", true)
Anyway, try adding this to your code as a function. Then add a conditional statement that runs the function every time your variable exceeds a certain amount.
I am still relatively new at answering questions so I hope this helps!

const checkboxes = [
"wall_side1",
"wall_side2",
"wall_side3",
"wall_side4"
].map((id) => document.getElementById(id));
const amountInput = document.getElementById("wall_amount");
amountInput.addEventListener("change", (event) => {
const value = parseInt(event.target.value || 0);
if (value === 4) {
checkboxes.forEach(
checkbox => {
checkbox.disabled = true;
checkbox.checked = true;
}
);
} else {
checkboxes.forEach(
checkbox => {
checkbox.disabled = false;
}
);
}
});

Updating knockout variable value

I have the below model
var CountryScopeVM = function (data, root) {
CountryScopeVM.call(this, data);
var self = this;
this.isSelected = ko.observable();
this.centralImpLowHeadCount = ko.observable();
this.load(data);
}
};
this.countryScopes = ko.observableList(CountryScopeVM, data.countryScopes, this);
And I have the below code which gets called when a checkbox is selected. What I am trying to do here is have all the centralImpLowHeadCount inside the countryscope array get updated when the main checkbox is checked but it is not updating and I don't see the change in the UI.
selectAllLOWImplementation: function (data, event) {
var select = $(event.target).is(':checked');
ko.utils.arrayForEach(model.countryScopes() || [], function (countryScope) {
countryScope().centralImpLowHeadCount == select;
});
return true;
}
HTML
<input type="checkbox" data-bind="checked: hasSelectedLOWImplementation, click: selectAllLOWImplementation" />
<td><input type="checkbox" data-bind="checked: centralImpLowHeadCount, enable: isOn" /></td>

Default text for null value with knockout bindings

I am using the same observable for display and edit views as follows. I would like a default text ('-') to appear in the display view whenever the return value is null, but I do not want that in the edit view. How could that be achieved?
function ViewModel() {
var self = this;
self.txt1 = ko.observable();
self.txt2 = ko.observable();
}
// View Mode
<span data-bind="text:txt1"></span>
<span data-bind="text:txt2"></span>
// Edit Mode
<input type="text" data-bind="value:txt1" />
<input type="text" data-bind="value:txt2" />

You can use a computed observable to return a value for the view mode, using it to check the value currently stored and return - if necessary:
function ViewModel() {
var self = this;
self.txt1 = ko.observable();
self.txt2 = ko.observable();
self.viewtxt1 = ko.computed(function() {
if (self.txt1() == null)
return '-';
return self.txt1();
});
self.viewtxt2 = ko.computed(function() {
//txt2 is checked for null or blank, use whichever is appropriate
if (self.txt2() == null || self.txt2() == '')
return '-';
return self.txt2();
});
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
// View Mode<br />
<span data-bind="text:viewtxt1"></span><br />
<span data-bind="text:viewtxt2"></span><br />
<br />
// Edit Mode<br />
<input type="text" data-bind="value:txt1" /><br />
<input type="text" data-bind="value:txt2" /><br />
In the above there are two different checks. txt1 is checked just for null, and so if you edit it and delete all characters, the blank value will persist in the view. txt2 is checked for both null and blank, so removing all characters will reset the view back to -. Use whichever one is appropriate to you.

This might not be the most paradigmatic Knockout.js solution but it's working well and it's very quick.
Instead of the <span> you could use an HTML <input />, with placeholder="-" readonly="readonly". You may want also to style it so that you hide borders.
<input class="readonly" data-bind="value:txt1" readonly placeholder="-" />
<input class="readonly" data-bind="value:txt2" readonly placeholder="-" />
.readonly {
border: 0;
}
http://jsfiddle.net/Lbf3uxqe/

An alternative approach to computeds as per my other answer is to write an entire new custom binding handler. This means you only have the one observable on your view model, with the logic contained within the binding handler instead. Note that you need to change the view to use this binding handler, rather than the text binding it was using:
ko.bindingHandlers.textdefault = {
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var v = valueAccessor();
var d = allBindings.get('defaultIfBlank') || '-';
element.innerText = (v() == null || v() == '') ? d : v();
}
};
function ViewModel() {
var self = this;
self.txt1 = ko.observable();
self.txt2 = ko.observable();
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
// View Mode<br />
<span data-bind="textdefault:txt1"></span><br />
<span data-bind="textdefault:txt2, defaultIfBlank: '$'"></span><br />
<br />
// Edit Mode<br />
<input type="text" data-bind="value:txt1" /><br />
<input type="text" data-bind="value:txt2" /><br />
Note that in this approach, we can also customise the handler through the allBindings variable - in the above I have added a parameter to allow customising of which character is displayed if the entry is blank.

Knockout.js enable save only if value change

I have a simple html page with value input and save button.
I want the save will be enabled only if the value is changed (somtimes is initialized and somtimes not.
I've tryied few things without any success
HTML
<input type="text"
placeholder="type here"
data-bind="value: rate,"/>
<button data-bind="click: save">Save</button>
JS
var viewmodel = function () {
this.rate = ko.observable('88').extend(required: true);
};
viewmodel.prototype.save = function () {
alert('save should be possible only if rate is changed);
};
Also on jsfiddle

Should be able to achieve this with a computed observable and the enable binding.
See http://jsfiddle.net/brendonparker/xhLrB/1/
Javascript:
var ctor = function () {
var self = this;
self.originalRate = '88';
self.rate = ko.observable('');
self.canSave = ko.computed(function(){
return self.originalRate == self.rate();
});
};
ctor.prototype.save = function () {
alert('save should be possible only if rate is changed');
};
ko.applyBindings(new ctor());
HTML:
<input type="text" placeholder="type here" data-bind="value: rate, valueUpdate: 'afterkeydown'"/>
<button data-bind="click: save, enable: canSave">Save</button>

ko.subscribe on child model properties

Looking for a good example of how to set up child models in knockoutjs. This includes binding to child events such as property updates which I haven't been able to get working yet.
Also, it would be better to bind to a single child in this case instead of an array but I don't know how to set it up in the html without the foreach template.
http://jsfiddle.net/mathewvance/mfYNq/
Thanks.
<div class="editor-row">
<label>Price</label>
<input name="Price" data-bind="value: price"/>
</div>
<div class="editor-row">
<label>Child</label>
<div data-bind="foreach: childObjects">
<div><input type="checkbox" data-bind="checked: yearRound" /> Year Round</div>
<div><input type="checkbox" data-bind="checked: fromNow" /> From Now</div>
<div>
<input data-bind="value: startDate" class="date-picker"/> to
<input data-bind="value: endDate" class="date-picker"/>
</div>
</div>
</div>
var ChildModel= function (yearRound, fromNow, startDate, endDate) {
var self = this;
this.yearRound = ko.observable(yearRound);
this.fromNow = ko.observable(fromNow);
this.startDate = ko.observable(startDate);
this.endDate = ko.observable(endDate);
this.yearRound.subscribe = function (val) {
alert('message from child model property subscribe\n\nwhy does this only happen once?');
//if(val){
// self.startDate('undefined');
// self.endDate('undefined');
//}
};
}
var ParentModel = function () {
var self = this;
this.price = ko.observable(1.99);
this.childObjects = ko.observableArray([ new ChildModel(true, false) ]);
};
var viewModel = new ParentModel ();
ko.applyBindings(viewModel);

Try it with the following:
this.yearRound.subscribe(function (val) {
alert('value change');
});
If you want to have the subscriber also being called while loading the page do something like this:
var ChildModel= function (yearRound, fromNow, startDate, endDate) {
var self = this;
this.yearRound = ko.observable();
this.fromNow = ko.observable(fromNow);
this.startDate = ko.observable(startDate);
this.endDate = ko.observable(endDate);
this.yearRound.subscribe(function (val) {
alert('value change');
});
this.yearRound(yearRound);
}
http://jsfiddle.net/azQxx/1/ - this works for me with Chrome 16 and Firefox 10
Every time the checked button changes its value the callback fires.
The observableArray is fine in my opinion if you may have more than one child model associated to the parent.