如何在每个字段集中禁用复选框和单选框输入,然后在选择某些输入后依次启用?
例如:最初,除第一个字段集外的所有字段集都被禁用。 用户在第一个字段集中选择输入后,将启用第二个。 依此类推。
与此相关,如何仅在检查第二个字段集中的单选输入后才显示计算值?
const calculator = document.querySelector("form");
const occasionPricing = {
party: 20,
birthday: 25,
anniversary: 50,
wedding: 100
}
const sizeIndexes = {
six: 1,
eight: 1.5,
ten: 2,
twelve: 2.5
}
const extrasPricing = {
candles: 5,
inscription: 10,
decoration: 25,
special: 50
}
function cakes() {
var cakes = Array.from(calculator.elements["cake"]).slice(0, 3);
var raphael = calculator.elements["raphael"];
function isChecked(checkbox) {
return checkbox.checked;
}
var count = cakes.filter(isChecked).length;
if (count) {
count = count * 0.5 + 0.5;
if (raphael.checked) {
count += 1;
}
return count;
}
return 0;
}
function occasion() {
var occasionCost = 0;
var occasion = calculator.elements["occasion"];
for (var i = 0; i < occasion.length; i++) {
if (occasion[i].checked) {
occasionCost = occasionPricing[occasion[i].value];
break;
}
}
return occasionCost;
}
function size() {
var sizeIndex = 1;
var size = calculator.elements["size"];
for (var i = 0; i < size.length; i++) {
if (size[i].checked) {
sizeIndex = sizeIndexes[size[i].value];
break;
}
}
return sizeIndex;
}
function extras() {
var extrasCost = 0;
const extras = calculator.elements["extras"];
for (var i = 0; i < extras.length; i++) {
if (extras[i].checked) {
extrasCost = extrasCost + extrasPricing[extras[i].value];
}
}
return extrasCost;
}
function calculateTotal() {
var totalCost = cakes() * occasion() * size() + extras();
calculator.total.value = "$" + totalCost;
}
<form>
<fieldset>
<legend>Select Cakes</legend>
<label><input type="checkbox" name="cake" id="leonardo" onclick="calculateTotal()">Leonardo</label>
<label><input type="checkbox" name="cake" id="donatello" onclick="calculateTotal()">Donatello</label>
<label><input type="checkbox" name="cake" id="michelangelo" onclick="calculateTotal()">Michelangelo</label>
<label><input type="checkbox" name="cake" id="raphael" onclick="calculateTotal()">Raphael</label>
<p>If you select more than one cake, the other cakes are discounted 50%.</p>
<p><small>Does not apply to Raphael.</small></p>
</fieldset>
<fieldset>
<legend>Choose Occasion</legend>
<label><input type="radio" name="occasion" value="party" onclick="calculateTotal()" required>Party</label><br>
<label><input type="radio" name="occasion" value="birthday" onclick="calculateTotal()">Birthday</label><br>
<label><input type="radio" name="occasion" value="anniversary" onclick="calculateTotal()">Anniversary</label><br>
<label><input type="radio" name="occasion" value="wedding" onclick="calculateTotal()">Wedding</label><br>
</fieldset>
<fieldset>
<legend>Choose Size</legend>
<label><input type="radio" name="size" value="six" onclick="calculateTotal()" required>6-inch</label><br>
<label><input type="radio" name="size" value="eight" onclick="calculateTotal()">8-inch</label><br>
<label><input type="radio" name="size" value="ten" onclick="calculateTotal()">10-inch</label><br>
<label><input type="radio" name="size" value="twelve" onclick="calculateTotal()">12-inch</label><br>
</fieldset>
<fieldset>
<legend>Select Extras</legend>
<label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label>
<label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label>
<label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label>
<label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
</fieldset>
<input type="text" name="total">
<input type="submit" value="Submit" onclick="calculateTotal()">
答案 0 :(得分:2)
在字段集上创建一个onchange事件侦听器,并触发一个启用下一个字段集的函数。查看工作片段
const calculator = document.querySelector("form");
const occasionPricing = {
party: 20,
birthday: 25,
anniversary: 50,
wedding: 100
}
const sizeIndexes = {
six: 1,
eight: 1.5,
ten: 2,
twelve: 2.5
}
const extrasPricing = {
candles: 5,
inscription: 10,
decoration: 25,
special: 50
}
function cakes() {
var cakes = Array.from(calculator.elements["cake"]).slice(0, 3);
var raphael = calculator.elements["raphael"];
function isChecked(checkbox) {
return checkbox.checked;
}
var count = cakes.filter(isChecked).length;
if (count) {
count = count * 0.5 + 0.5;
if (raphael.checked) {
count += 1;
}
return count;
}
return 0;
}
function occasion() {
var occasionCost = 0;
var occasion = calculator.elements["occasion"];
for (var i = 0; i < occasion.length; i++) {
if (occasion[i].checked) {
occasionCost = occasionPricing[occasion[i].value];
break;
}
}
return occasionCost;
}
function size() {
var sizeIndex = 1;
var size = calculator.elements["size"];
for (var i = 0; i < size.length; i++) {
if (size[i].checked) {
sizeIndex = sizeIndexes[size[i].value];
break;
}
}
return sizeIndex;
}
function extras() {
var extrasCost = 0;
const extras = calculator.elements["extras"];
for (var i = 0; i < extras.length; i++) {
if (extras[i].checked) {
extrasCost = extrasCost + extrasPricing[extras[i].value];
}
}
return extrasCost;
}
function calculateTotal() {
var totalCost = cakes() * occasion() * size() + extras();
calculator.total.value = "$" + totalCost;
}
function enableFieldset(element, event) {
if (event.currentTarget.id == 'cakes') {
var checked = false;
var checkboxes = document.getElementsByName("cake");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checked = true;
break;
}
}
if (checked) {
document.getElementById(element).disabled = false;
} else {
document.getElementById(element).disabled = true;
}
} else {
document.getElementById(element).disabled = false;
}
}
<form>
<fieldset id="cakes" onchange="enableFieldset('occasion',event)">
<legend>Select Cakes</legend>
<label><input type="checkbox" name="cake" id="leonardo">Leonardo</label>
<label><input type="checkbox" name="cake" id="donatello">Donatello</label>
<label><input type="checkbox" name="cake" id="michelangelo">Michelangelo</label>
<label><input type="checkbox" name="cake" id="raphael">Raphael</label>
<p>If you select more than one cake, the other cakes are discounted 50%.</p>
<p><small>Does not apply to Raphael.</small></p>
</fieldset>
<fieldset id="occasion" onchange="enableFieldset('size', event)" disabled>
<legend>Choose Occasion</legend>
<label><input type="radio" name="occasion" value="party" onclick="calculateTotal()" required>Party</label><br>
<label><input type="radio" name="occasion" value="birthday" onclick="calculateTotal()">Birthday</label><br>
<label><input type="radio" name="occasion" value="anniversary" onclick="calculateTotal()">Anniversary</label><br>
<label><input type="radio" name="occasion" value="wedding" onclick="calculateTotal()">Wedding</label><br>
</fieldset>
<fieldset id="size" onchange="enableFieldset('extras', event)" disabled>
<legend>Choose Size</legend>
<label><input type="radio" name="size" value="six" onclick="calculateTotal()" required>6-inch</label><br>
<label><input type="radio" name="size" value="eight" onclick="calculateTotal()">8-inch</label><br>
<label><input type="radio" name="size" value="ten" onclick="calculateTotal()">10-inch</label><br>
<label><input type="radio" name="size" value="twelve" onclick="calculateTotal()">12-inch</label><br>
</fieldset>
<fieldset id="extras" disabled>
<legend>Select Extras</legend>
<label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label>
<label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label>
<label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label>
<label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
</fieldset>
<input type="text" name="total">
<input type="submit" value="Submit" onclick="calculateTotal()">