Disable not working properly in Knockout

Question

I need to disable fields if they have been deleted, but it is not working properly.

I have created a JSFiddle: https://jsfiddle.net/mdawood1991/fs1exz6q/

The x Mark should delete the Item (Disable TextBox), but it is not:

This is my ViewModel:

var viewModel = {};

function QuoteViewModel() {
    var self = this;
    self.Quantity = ko.observable();
    self.Price = ko.observable();
    self.Total = ko.computed(function () {
        return this.Price() * this.Quantity();
    }, this);
    self.isDeleted = ko.observable(false);


    self.remove = function (item) {
        console.log('A');
        item.isDeleted = ko.observable(true);
        console.log(item.isDeleted());
    }
};

viewModel = new QuoteViewModel();
ko.applyBindings(viewModel);

And this is the Related HTML:

<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price Type</label>
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Quantity</label>
        <input type="text" class="form-control" data-bind="numeric: Quantity, value: Quantity, valueUpdate: 'afterkeydown', disable: !isDeleted()" />
        <!--numeric: number, value: number, valueUpdate: 'afterkeydown'-->
    </div>
</div>
<div class="col-md-3">
    <div class="form-group">
        <label class="control-label">Price</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="numeric: Price, value: Price, valueUpdate: 'afterkeydown'" />
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="form-group">
        <label class="control-label">Total</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" data-bind="textInput: Total" />
        </div>
    </div>
</div>
<div class="col-md-1"> <span class="glyphicon glyphicon-remove" data-bind="click: remove"></span>

</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

When I click on 'x' It updates the isDeleted Property to TRUE , But it does not get updated in my HTML ( <pre> <p> ) Tags.

How it should work:

 1. When isDeleted == true (Disable fields) 
 2. When isDeleted == false (Enable)

Answer 1

Setting an observable goes by invoking it as a function . Instead of:

item.isDeleted = ko.observable(true);

Use:

item.isDeleted(true);

See this fiddle for a demo.