javascriptで表示が切り替わるボタンの制御を変えたい

Question

前提・実現したいこと

・前提
PHP(Laravel)で実装中のシステム内で
勤務可能時間の申請を行う画面と機能を作っています。

４つのステータスを持つトグルスイッチとして実装していて
デフォルトは「未提出」という表示で
終日可、時間指定、出勤不可、といった３つのステータスに切り替わります。

一度申請した後は
申請したステータスが初期値として入り
修正を行うことができるものです。

そして、未提出に戻すことはできず
一週間以内のステータスに関しては
下位のものに変更ができなくなる制御を入れたいです。
（終日可→時間指定、時間指定→対応不可、終日可→対応不可）

このうち、ステータスが切り替わるところまでは実装ができ
時間指定を選択しているときには、時間の入力が可能なフォームを表示させるところまでは
実装することができました。

・実現したいこと

一週間以内のステータスに関する制御のうち
終日可→時間指定をできなくする制御が抜けているので
それを実装したい。

発生している問題

提出しているステータスのうち
１つだけ制御が抜けてしまっている。

該当のソースコード

/**
 * シフト提出
 */
$(function () {
    $('ul.shift-input li.lp-shift-level-none').on("click", function () {
        setShift($(this));
    });
    $('ul.shift-input li.lp-shift-level-work').on("click", function () {
        setShift($(this));
    });
    $('button#lp-shift-on-off').on("click", function () {
    	setShiftOnOff($(this));
    });
});

function setShift(obj) {
    // シフトレベルクリック 待機開始時間を設定

    let date = obj.attr('data-date');
    let hour = obj.attr('data-hour');
    let intHour = parseInt(obj.attr('data-hour'));
    let lastTrain = $('input[name="last_train_time[' + date + ']"]').val();
    let intLastTrain = parseInt(lastTrain.replace(/:/g, ''));

    if (intLastTrain > 1200 && intLastTrain < (intHour * 100)) {
        alert('終電より遅いシフトは、提出できません。');
        return;
    }

    $('li[data-date='+ date +']').each(function () {
        // アイコン付け替え
        let intLiHour = parseInt($(this).attr('data-hour'));
        if ($(this).hasClass('lp-shift-level-locked')) {
            return;
        }
        let setLevel = function (eachObj, level, removeLevel) {
            eachObj.removeClass('lp-shift-level-' + removeLevel);
            eachObj.addClass('lp-shift-level-' + level);
            eachObj.find('span').removeClass('lp-shift-level-' + removeLevel);
            eachObj.find('span').addClass('lp-shift-level-' + level);
        };
        intLiHour >= intHour ? setLevel($(this), 'work', 'none') : setLevel($(this), 'none', 'work');
    });
    $('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
}

function setShiftOnOff(obj) {
	// 出勤可不可の設定
	let date = obj.attr('data-date');
	let hour = obj.attr('data-hour');
	let last = obj.attr('data-last');
	let on = obj.attr('data-on');
	let off = obj.attr('data-off');
	let one_week = obj.attr('data-week');
	let off_day = obj.attr('data-offable');

	// ボタンを押したときの動作
	if (obj.hasClass('btn btn-secondary btn-sm') | obj.hasClass('btn btn-danger btn-sm') | (obj.hasClass('btn btn-info btn-sm') & !one_week & !off_day)){
		// 	未提出or出勤不可→終日（１週間以内の場合は出勤不可にできない）
		obj.removeClass('btn btn-secondary btn-sm');
		obj.removeClass('btn btn-danger btn-sm');
		obj.removeClass('btn btn-info btn-sm');
		obj.addClass('btn btn-primary btn-sm');
		$('button[name="shift_on_off[' + date + ']"]').html("終日</br>可");
		$('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
	    $('input[name="last_train_time[' + date + ']"]').val(last + ':00');
		$('input[name="shift_on_off[' + date + ']"]').val(on);
		$('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show();
		$('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show();
	} else if (obj.hasClass('btn btn-primary btn-sm')){
		// 終日可→時間入力
		obj.removeClass('btn btn-primary btn-sm');
		obj.addClass('btn btn-info btn-sm');
		$('button[name="shift_on_off[' + date + ']"]').html("時間</br>入力");
		$('input[name="stand_by_time[' + date + ']"]').attr('type', 'time');
		$('input[name="last_train_time[' + date + ']"]').attr('type', 'time');
		$('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
	    $('input[name="last_train_time[' + date + ']"]').val(hour + ':00');
		$('input[name="shift_on_off[' + date + ']"]').val(on);
		$('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide();
		$('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide();
	} else {
		// 時間入力→出勤不可
		obj.removeClass('btn btn-info btn-sm');
		obj.addClass('btn btn-danger btn-sm');
		$('#input_time[' + date + ']').hide();
		$('button[name="shift_on_off[' + date + ']"]').html("出勤</br>不可");
		$('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
	    $('input[name="last_train_time[' + date + ']"]').val(hour + ':00');
		$('input[name="shift_on_off[' + date + ']"]').val(off);
		$('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').hide();
		$('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').hide();
	}
}

試したこと

else ifに下記を追加してみたが挙動が変わらなかった

	} else if (obj.hasClass('btn btn-primary btn-sm') & !one_week & !off_day){
		obj.removeClass('btn btn-secondary btn-sm');
		obj.removeClass('btn btn-danger btn-sm');
		obj.removeClass('btn btn-info btn-sm');
		obj.addClass('btn btn-primary btn-sm');
		$('button[name="shift_on_off[' + date + ']"]').html("終日</br>可");
		$('input[name="stand_by_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="last_train_time[' + date + ']"]').attr('type', 'hidden');
		$('input[name="stand_by_time[' + date + ']"]').val(hour + ':00');
	    $('input[name="last_train_time[' + date + ']"]').val(last + ':00');
		$('input[name="shift_on_off[' + date + ']"]').val(on);
		$('form#lp-action-form').find('div[name="shift_all_stand_by[' + date + ']"]').show();
		$('form#lp-action-form').find('div[name="shift_all_last_train[' + date + ']"]').show();		

補足情報（FW/ツールのバージョンなど）

PHP7系
Laravel5系です

このjsを利用しているviewは下記となります
https://ideone.com/ZhBAXA

利用しているビューコンポーザーは下記です

https://ideone.com/Qt8EGL

文字数オーバーしてしまったので外部に切り出しました。

宜しくお願い足します。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
また、提示コードにはLaravelはおろかPHPがどのように絡んでくるかが分かりません。

[clovismoment]

質問に不備があり、大変失礼いたしました。
修正致しました。

[moredeep]

>// 未提出or出勤不可→終日（１週間以内の場合は出勤不可にできない）
これの意味が解らないです。"終日に変更する"というコメントの後に、"出勤不可にできない"とは？
>else ifに下記を追加してみたが挙動が変わらなかった
これってelse if を書き換えたって意味であってますか？それともelse if ブロックをそのまま追加しましたか？
とりあえず、ブラウザの開発者デバッグで、one_weekとかのif文の条件の値を確認するところから始めたほうがよろしいのではないでしょうか。

これは質問に関係ありませんが、クラスbtnとbtn-smはいちいち削除して追加しなくていいはずです。
obj.removeClass('btn btn-info btn-sm');→obj.removeClass('btn-info');
これだけでも多少はif文が見易くなるでしょうし、文字数が減れば誤字脱字を減らせます。

Answer 1

| ⇒ || 、& ⇒ &&

【論理演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

Comments

[clovismoment]

制御をかける、ということには成功しています・・・。

[kei344]

コードが間違っていることを指摘しているので、「うごいくもん！」と言われても。
「|」「&」それぞれ単体で使うとビット演算子になり、組み合わせによっては動いているように見えるかもしれませんね。

【ビット演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators