「formの入力と値のサンプル：必須入力ありで、ボタンの有効・無効」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

formの入力と値のサンプル：必須入力ありで、ボタンの有効・無効

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>formの入力と値のサンプル：必須入力ありで、ボタンの有効・無効</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
function ViewModel() {
var self = this;
// 品名データ
self.itemData = ko.observableArray([
{"name": "ねぎ間", "price": "168"},
{"name": "ハツ", "price": "136"},
{"name": "レバー", "price": "136"},
{"name": "ぼんちり", "price": "136"},
{"name": "はらみ", "price": "136"},
{"name": "うずら玉子", "price": "136"},
{"name": "なんこつ", "price": "136"},
{"name": "手羽先", "price": "168"},
{"name": "せせり", "price": "136"},
{"name": "白レバー", "price": "168"},
{"name": "丸ごとシマウマ", "price": "290"}
]);
// 品名の初期値
self.selected = ko.observable(self.itemData()[10]);
// 注文内容
self.Order = ko.observable();
self.Item = ko.computed(function() { return self.selected().name; }, self);
self.Taste = ko.observable();
self.perPrice = ko.computed(function() { return self.selected().price; }, self);
self.KushiNum = ko.observable(1);
self.Price = ko.computed(function()
{
kushi = 1;
if (isNaN(self.KushiNum()) != true && 0 < self.KushiNum())
{
kushi = parseFloat(self.KushiNum());
}
total = parseFloat(self.selected().price) * kushi;
return total;
}, self);
// 必須入力のフラグ：値が無問題なら「0」
self.numOrder = ko.observable(0);
self.numTaste = ko.observable(0);
self.numNum = ko.observable(0);
// 注文者チェック：入力なければ警告表示
self.waringOrder = ko.computed(function()
{
waringOrderMsg = "";
if (self.Order() == "" || self.Order() == undefined)
{
waringOrderMsg = "※必須入力";
self.numOrder(1);
}
else
{
self.numOrder(0);
}
return waringOrderMsg;
}, self);
// 味チェック：入力なければ警告表示
self.waringTaste = ko.computed(function()
{
waringTasteMsg = "";
if (self.Taste() == "" || self.Taste() == undefined)
{
waringTasteMsg = "※必須入力";
self.numTaste(1);
}
else
{
self.numTaste(0);
}
return waringTasteMsg;
}, self);
// 本数チェック：数字じゃない・1本未満ならば警告表示
self.waringNum = ko.computed(function()
{
waringNumMsg = "";
if (isNaN(self.KushiNum()) == true)
{
waringNumMsg = "※数字だけ";
self.numNum(1);
}
else if (parseFloat(self.KushiNum()) < 1)
{
waringNumMsg = "※1本以上";
self.numNum(1);
}
else if (self.KushiNum() == "")
{
waringNumMsg = "※必須入力";
self.numNum(1);
}
else
{
self.numNum(0);
}
return waringNumMsg;
}, self);
// ボタンの有効化：必須対象の合計が「0」じゃないなら「無効」
self.sendBtn = ko.computed(function()
{
numTotal = self.numOrder() + self.numTaste() + self.numNum();
return numTotal;
}, self);
// オーダーボタンが押されたとき
self.gotoOrder = function()
{
msg = "";
msg += "注文者：" + this.Order() + "\n";
msg += "商品名：" + this.Item() + "\n";
msg += "　味　：" + this.Taste() + "\n";
msg += "単　価：" + this.perPrice() + "円\n";
msg += "本　数：" + this.KushiNum() + "本\n";
msg += "合　計：" + this.Price() + "円\n";
alert(msg);
}
}
</script>
<style>
table
{
border-collapse:collapse;
margin:0;
}
th, td
{
text-align:left;
vertical-align:top;
padding:8px;
font-weight:normal;
border:1px solid #ccc;
}
th
{
background:#f3f3f3;
}
</style>
</head>
<body>
<h1>formの入力と値のサンプル：必須入力ありで、ボタンの有効・無効</h1>
<table>
<tr><th>注文者</th><td>
<input type="text" data-bind="value: Order, valueUpdate: 'afterkeydown'" />
<span style="color:red;" data-bind="text: waringOrder, visible: waringOrder"></span>
</td></tr>
<tr><th>商品</th><td><select data-bind="options: itemData, optionsText: 'name', value: selected"></select></td></tr>
<tr><th>味</th><td>
<label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="たれ" />たれ</label> /
<label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="塩" />塩</label> /
<label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="味噌" />味噌</label> /
<label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="明太子" />明太子</label> /
<label><input type="radio" name="tasteGroup" data-bind="checked: Taste" value="ネギマヨ" />ネギマヨ</label>
<span style="color:red;" data-bind="text: waringTaste, visible: waringTaste"></span>
</td></tr>
<tr><th>本数</th><td>
<input type="text" data-bind="value: KushiNum, valueUpdate: 'afterkeydown'" /> 本
<span style="color:red;" data-bind="text: waringNum, visible: waringNum"></span>
</td></tr>
<tr><th>価格</th><td><span data-bind="text: Price"></span> 円（単価：<span data-bind="text: perPrice"></span> 円）</td></tr>
</table>
<div style="margin-top:6px;"><input type="submit" data-bind="click: gotoOrder, disable: sendBtn" value="注文" /></div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>