「jQuery」attrメソッドで複数の属性を同時に設定するサンプル
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0
構文
$(要素).attr({
maxlength:値1,
value:値2
size:値3
});
$(要素).attr({
maxlength:値1,
value:値2
size:値3
});
$(要素).attr({
maxlength:値1,
value:値2
size:値3
});
maxlength、valueとsizeの値を同時にセットしています。
使用例
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名前:<input type="text" id="txtName" value="大阪" maxlength="5" disabled>
<p><input type="button" id="btnReg" value="設定" ></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnReg").click(function() {
// 属性値を設定
$("#txtName").attr({
maxlength:10,
value:"東京",
size:30
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名前:<input type="text" id="txtName" value="大阪" maxlength="5" disabled>
<p><input type="button" id="btnReg" value="設定" ></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnReg").click(function() {
// 属性値を設定
$("#txtName").attr({
maxlength:10,
value:"東京",
size:30
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
名前:<input type="text" id="txtName" value="大阪" maxlength="5" disabled>
<p><input type="button" id="btnReg" value="設定" ></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnReg").click(function() {
// 属性値を設定
$("#txtName").attr({
maxlength:10,
value:"東京",
size:30
});
});
</script>
</body>
</html>
実行結果
「設定」を押下すると、テキストボックスに「東京」が表示されます。