Fujillin さんが回答する前に書いてみたものの、審査中に先を越される

教えてgoo

ボタンで選択されていないセレクトメニューの非反映２
http://oshiete.goo.ne.jp/qa/7096547.html


それにしても、久々の回答！
緊急の仕事も目処がついて、やっと一息。


checkbox が、disabled = true でも計算対象となっていたので修正。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>簡単見積もり表</title>

  <style type="text/css">

fieldset {
  margin-bottom :1em;
}
fieldset > p {
  margin : 0;
}

  </style>
</head>

<body>
<form>
  <fieldset>
    <legend>セットの果物を一つお選び下さい</legend>
    <input type="radio" name="ch1" value="100">りんご（100円）
    <input type="radio" name="ch1" value="20">バナナ（20円）
    <input type="radio" name="ch1" value="200">梨（200円）
    <input type="radio" name="ch1" value="250">ブドウ（250円）
    <input type="radio" name="ch1" value="150" checked>みかん（150円）
  </fieldset>

  <fieldset>
    <legend>リボンの色をお選びください</legend>
    <input type="radio" name="ch2" value="0" checked>赤（0円）
    <input type="radio" name="ch2" value="2000">青（2000円）
    <input type="radio" name="ch2" value="10">金（10円）
  </fieldset>

  <fieldset>
    <legend>バスケットの形をお選び下さい</legend>
    <p>
      <input type="radio" name="cover" value="1200" checked>プラスチック丸型編み込み\1200
      <input type="checkbox" name="bx1" value="500">素材を木に変更（+\500）

    <p>
      <input type="radio" name="cover" value="1500">編み込み四角\1500

    <p>
      <input type="radio" name="cover" value="1500">編み込み楕円\1500

    <p>
      <input type="radio" name="cover" value="1000">蓋なしボックスレインボー1000円

    <p>
      <input type="radio" name="cover" value="0">
      <b>蓋付きのボックス</b>色によって値段が変化します<br>
      <select name="sel1" disabled>
        <option value="39900" selected>赤1000円
        <option value="52500">青1000円
        <option value="54600">金1100円
      </select>

    <p>
      <input type="radio" name="cover" value="0">
      <b>蓋付きバスケット</b>形によって値段が変化します<br>
      <select name="sel2" disabled>
        <option value="1500" selected>丸  1500円
        <option value="1600">四角  1600円
        <option value="1600">楕円  1600円
      </select>
       
  </fieldset>

  <fieldset>
    <legend>ご希望のオプションがあれば選択して下さい。（複数選択可）</legend>
    <input type="checkbox" name="bx1" value="300">クッション材\300
    <input type="checkbox" name="bx1" value="200">飾り\200
    <input type="checkbox" name="bx1" value="150">メッセージカード\150
    <input type="checkbox" name="bx1" value="2500">花束\2,500
  </fieldset>

  <p>
    <input type="button" value="合計を出す">
    合計 <input type="text" name="result">

</form>


<script>
function add (result, num) {
  return result + num;
}


function toNumber (e) {
  return isNaN (e.value) ? 0: Number (e.value);
}


function isChecked (node) {
  return (! node.disabled && node.checked);
}


function isRadio (node) {
  return ('radio' === node.type);
}


function setDisabled (node) {
  node.disabled = this.disabled;
}


function withDisabled (node) {
  var p = node.parentNode;

  if ('P' === p.nodeName)
    getDescendant.call (this, p).forEach (setDisabled, { disabled: !node.checked });
}


function getDescendant (parent) {
  switch (parent.nodeName) {
  case 'INPUT' : case 'SELECT' : case 'TEXTAREA' :
    return (this.name === parent.name) ? []: [parent];
  default :
    return (parent.hasChildNodes ())
           ? Array.prototype.concat.apply ([],
               Array.prototype.map.call (parent.childNodes, arguments.callee, this))
           : [];
  }
}


function calc (event) {
  var target = event.target || event.srcElement;
  var es = target.form.elements;
  var ary = Array.prototype.concat.call ([],
        Array.prototype.filter.call (es['ch1'], isChecked),
        Array.prototype.filter.call (es['ch2'], isChecked),
        Array.prototype.filter.call (es['bx1'], isChecked),
        Array.prototype.filter.call (es['cover'], isChecked));

  if (! es['sel1'].disabled)
    ary.push (es['sel1']);

  if (! es['sel2'].disabled)
    ary.push (es['sel2']);
  
  es['result'].value = ary.map (toNumber).reduce (add, 0);
}


function handler (event) {
  var e = event.target || event.srcElement;
  
  if (e.value === '合計を出す')
    return calc (event);

  if (isRadio (e))
    Array.prototype.filter.call (e.form.elements[e.name], isRadio).forEach (withDisabled, e);
}


document./*@cc_on @if(1) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/
  'click', handler, false);

</script>