背景 Pug(旧称Jade)で checked などの真偽型属性を条件に応じて付与したりしなかったりしたい場合、どうすれば良いのか。従業員に質問されて、たしかにちょっとわかりにくいかなと思ったので、今後同じところで迷う人のために書いておく。 前提 HTML5では checked 属性のような真偽型の属性に対して許容されている値は空文字から属性値と同じ値(大文字小文字は区別しない)のいずれかのみである(W3C)。またそれ以外の文字列("false"など)が指定された場合は不正値として空文字と同じように処理される。 したがって実際のブラウザの挙動では以下はいずれもチェック状態となる。 <!-- 以下は正しい --> <input type="checkbox" value="1" checked> <input type="checkbox" value="1" checked=""> <in
![Pug で checked / selected / disabled属性などを動的付与する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/06436fad7029d85d75de3e500e71dc5fd93c1294/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UHVnJTIwJUUzJTgxJUE3JTIwY2hlY2tlZCUyMCUyRiUyMHNlbGVjdGVkJTIwJTJGJTIwZGlzYWJsZWQlRTUlQjElOUUlRTYlODAlQTclRTMlODElQUElRTMlODElQTklRTMlODIlOTIlRTUlOEIlOTUlRTclOUElODQlRTQlQkIlOTglRTQlQjglOEUlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTU1MDEwODkxZWZkYTNhYThjNzM0ZTU2MTkxMDk0MWMz%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBteXpreXkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRjYTZhOWY1NTJkYzJkYWRmYjNkZGE4ZmQzMDg2MWFh%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D90fedabf1b7ca0172bb936ed4b3040e1)