ユーザーが入力した数値に計算を加えて表示させる際の手順について
簡潔にまとめたのでご紹介します。
（今回は、価格と販売利益として表示します。）

1. HTMLで価格コーナーを準備する

sample.haml

~省略~

= f.number_field :price, placeholder: "0", class: 'exhibit-form_price' do　-#入力欄
　　%span.mark
   　¥
   .exhibit-form_right
.commission-line
  .commission-line_left
    販売手数料 (10%)
  .commission-line_right
    ー
  .profit-line
    .profit-line_left
      販売利益
    .profit-line_right
       ー

~省略~

2. Jsの準備をする

フォームの入力値を取得し、任意の計算をした数値を
販売利益の欄に差し込みます。

sample.js

  $('.exhibit-form_price').on('keyup', function(){
    var data = $(this).val();
    var profit = Math.round(data * 0.9)
    var fee = (data - profit)
    $('.commission-line_right').html(fee)
    $('.commission-line_right').prepend('¥')
    $('.profit-line_right').html(profit)
    $('.profit-line_right').prepend('¥')
    $('#price').val(profit)
    if(profit == '') {
    $('.profit-line_right').html('');
    $('.commission-line_right').html('');
    }
  })

---

以上で終了です。
ご覧いただきありがとうございました。

aタグにはdisable属性がない

Chromeの場合、＜input＞ ＜textarea＞ ＜select＞タグなどはdisabledを書けば非活性になりますが、＜a＞タグにはdisable属性がないので利きません。

aタグのリンクを無効化するには？

css

 pointer-events:none;

上記で非活性化することができます。
＜img＞タグも同様です。

ある条件のときだけ複数の項目を一括で非活性にするには？

そういう場合はJavaScriptを使います。
変更したい項目を＜div＞で囲み、idを付与します。

タグ名で要素を指定することで、項目を複数取得することが出来ます。
【document.getElementById("ID名").getElementsByTagName("input")】

それをFor文で回して各項目ごとにdisable属性や、css.Style属性を付与していきます。

JavaScript

window.onload = function(){
    var flg = $("#modeflg").val();
/*条件*/
    if(flg == "2"){     
        var inputItem = document.getElementById("changeDisable").getElementsByTagName("input");
        for(var i=0; i<inputItem.length; i++){
          inputItem[i].disabled = true;
        }
        var inputItem = document.getElementById("changeDisable").getElementsByTagName("textarea");
        for(var i=0; i<inputItem.length; i++){
          inputItem[i].disabled = true;
        }
        var selectItem = document.getElementById("changeDisable").getElementsByTagName("select");
        for(var i=0; i<selectItem.length; i++){
          selectItem[i].disabled = true;
        }
        var selectItem = document.getElementById("changeDisable").getElementsByTagName("a");
        for(var i=0; i<selectItem.length; i++){
            selectItem[i].style.pointerEvents = 'none';
        }
        var selectItem = document.getElementById("changeDisable").getElementsByTagName("img");
        for(var i=0; i<selectItem.length; i++){
            selectItem[i].style.pointerEvents = 'none';
        }
    }
};

【初心者でもわかる】CSSのセレクタ3種類の書き方（隣接セレクタ・間接セレクタ・直下セレクタ）

セレクタは、どの対象にCSSを適用させるかを指示するもの。
「セレクタって何？」という方、近日中にセレクタについての記事もかきますのでお待ちくださいませ！

『隣接セレクタ』（+）

次の兄弟要素、つまりある要素から見て同階層にある次の要素に対してCSSを適用することができます。

隣接セレクタの書き方

See the Pen 隣接セレクタ by 7note (@7note) on CodePen.

隣接セレクタの書き方は、【+】（プラス）を使います。
h2には「h1の次にくるh2を赤色に」という書き方をしています。
同様に、h3には「h2の次にくるh3を青色に」という書き方をしています。

※注意として隣接セレクタは名前の通り隣にいないとCSSが適用されません！
（なので、h4には緑色が反映されていません。隣接セレクタを使ってh4にCSSを当てたいなら「h1 + h4」となっているところを、「h3 + h4」と書きましょう！）

『間接セレクタ』（~）

以降の兄弟要素全て、つまりある要素から見て同階層にいるそれ以降の要素全てに対してCSSを適用することができます。

間接セレクタの書き方はこちら↓

See the Pen 間接セレクタ by 7note (@7note) on CodePen.

間接セレクタの書き方は、【~】（チルダ）を使います。
h2には「同階層にあるh1以降の全てのh2を赤色に」という書き方をしています。
h3には「同階層にあるh2以降の全てのh3を青色に」という書き方をしています。
さきほどはh4には緑色が入りませんでしたが「同階層にあるh1以降の全てのh4を青色に」という書き方になるので、h4にも緑色が適応されました。

『直下セレクタ』（>）

直属の子要素にのみ、CSSを適用することができます。

直下セレクタの書き方はこちら↓

See the Pen mdVmxXz by 7note (@7note) on CodePen.

直下セレクタの書き方は、【>】（大なり）を使います。
下線は「japanとついたクラスの中にある全てのp」に対して適応されていますが、
赤色は「japanとついたクラスから見て、1つ中の階層にあるp」にだけ適応されています。

まとめ

セレクタの種類	使う記号	適応範囲
隣接セレクタ	+	同階層にある次の要素
間接セレクタ	~	ある要素から見て同階層にいるそれ以降の要素
直下セレクタ	>	直属の子要素

どうも、7noteです。今回はセレクタのお話。

セレクタは、どの対象にCSSを適用させるかを指示するもの。
「セレクタって何？」という方、近日中にセレクタについての記事もかきますのでお待ちくださいませ！

『隣接セレクタ』（+）

次の兄弟要素、つまりある要素から見て同階層にある次の要素に対してCSSを適用することができます。

隣接セレクタの書き方

See the Pen 隣接セレクタ by 7note (@7note) on CodePen.

隣接セレクタの書き方は、【+】（プラス）を使います。
h2には「h1の次にくるh2を赤色に」という書き方をしています。
同様に、h3には「h2の次にくるh3を青色に」という書き方をしています。

※注意として隣接セレクタは名前の通り隣にいないとCSSが適用されません！
（なので、h4には緑色が反映されていません。隣接セレクタを使ってh4にCSSを当てたいなら「h1 + h4」となっているところを、「h3 + h4」と書きましょう！）

『間接セレクタ』（~）

以降の兄弟要素全て、つまりある要素から見て同階層にいるそれ以降の要素全てに対してCSSを適用することができます。

間接セレクタの書き方はこちら↓

See the Pen 間接セレクタ by 7note (@7note) on CodePen.

間接セレクタの書き方は、【~】（チルダ）を使います。
h2には「同階層にあるh1以降の全てのh2を赤色に」という書き方をしています。
h3には「同階層にあるh2以降の全てのh3を青色に」という書き方をしています。
さきほどはh4には緑色が入りませんでしたが「同階層にあるh1以降の全てのh4を青色に」という書き方になるので、h4にも緑色が適応されました。

『直下セレクタ』（>）

直属の子要素にのみ、CSSを適用することができます。

直下セレクタの書き方はこちら↓

See the Pen mdVmxXz by 7note (@7note) on CodePen.

直下セレクタの書き方は、【>】（大なり）を使います。
下線は「japanとついたクラスの中にある全てのp」に対して適応されていますが、
赤色は「japanとついたクラスから見て、1つ中の階層にあるp」にだけ適応されています。

まとめ

セレクタの種類	使う記号	適応範囲
隣接セレクタ	+	同階層にある次の要素
間接セレクタ	~	ある要素から見て同階層にいるそれ以降の要素
直下セレクタ	>	直属の子要素

おしまい。

学習内容

• HTML&CSS学習（Progate）

その他

• タイピング練習

明日の予定

　HTML＆CSSの基礎は大体問題なさそうなので明日で道場編を一通り行い、次に移りたいと思います。