<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rotate and Center with Proportional Div2</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.disabled {
opacity: 0.5;
pointer-events: none;
}
.tooltip {
display: none;
}
.tooltip_wrap:hover .tooltip {
display: inline-flex;
background: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 12px;
}
.tooltip-visible {
display: inline-block;
}
</style>
</head>
<body>
<div class="selectbutton">
<button class="selectall disabled">all</button>
<button class="ikkatsu disabled">ikkatsu</button>
</div>
<div class="checkList">
<input type="checkbox" class="selects" />
<label for="selects">check1</label>
<span class="product">pc</span>
</div>
<div class="checkList">
<input type="checkbox" class="selects" />
<label for="selects">check2</label>
<span class="product">pc</span>
</div>
<div class="checkList">
<input type="checkbox" class="selects" />
<label for="selects">check3</label>
<span class="product">tablet</span>
</div>
<script>
$(document).ready(function() {
$('.selects').on('change', function() {
const checkedCheckboxes = $('.selects:checked');
const checkedCount = checkedCheckboxes.length;
// 更新 selectall ボタンの状態
if (checkedCount > 0) {
$('.selectall').removeClass('disabled');
} else {
$('.selectall').addClass('disabled');
}
// すべてのチェックされた product クラスの値を取得
const products = checkedCheckboxes.closest('.checkList').find('.product').map(function() {
return $(this).text();
}).get();
// すべての product クラスの値が同じかどうかを確認
const allSameProduct = products.length > 0 && products.every(val => val === products[0]);
// 更新 ikkatsu ボタンの状態
if (allSameProduct && checkedCount > 0) {
$('.ikkatsu').removeClass('disabled');
$('.ikkatsu').parent('a').contents().unwrap(); // aタグとspanを削除
$('.ikkatsu').siblings('span').remove(); // 既存のspanを削除
} else {
if (!$('.ikkatsu').hasClass('disabled')) {
$('.ikkatsu').addClass('disabled');
// aタグで囲み、spanを追加
$('.ikkatsu').wrap('<a class="tooltip_wrap"></a>').after('<span class="tooltip">ここにツールチップが入ります</span>');
}
}
});
});
</script>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme