jQuery API の jQuery( ':enabled' ) は、有効になっている要素を、すべて選択する。
記述方法
jQuery( ':enabled' )
有効になっている要素を、すべて選択する。
記述例
jQuery( 'form :enabled' )
form 要素内の要素で、有効になっている要素を、すべて選択する。
実装例（サンプル）
有効になっている要素の数：
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、フォーム内の要素のうち、有効になっている要素の背景色が、ピンク色に変わる。さらに、「有効になっている要素の数：」の右横に「15個」と表示する。
「toggle」ボタンを再度クリックすると、フォーム内の要素のうち、有効になっている要素の背景色が、黄色に戻る。さらに、「有効になっている要素の数：」の右横の「15個」を非表示にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-form :enabled' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-api-message' ) . text(
jQuery( '#jquery-api-form :enabled' ) . length + "個"
);
},
function () {
jQuery( '#jquery-api-form :enabled' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-api-message' ) . text( "" );
}
);
jQuery( 'form#jquery-api-form' ) . submit( function () { return false; } );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-form :enabled' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-api-message' ) . text(
jQuery( '#jquery-api-form :enabled' ) . length + "個"
);
},
function () {
jQuery( '#jquery-api-form :enabled' ) . css( {
backgroundColor: 'yellow',
} );
jQuery( '#jquery-api-message' ) . text( "" );
}
);
jQuery( 'form#jquery-api-form' ) . submit( function () { return false; } );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-form p {
margin-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #f0f0f0;
}
#jquery-api-form input,
#jquery-api-form select,
#jquery-api-form textarea,
#jquery-api-form button {
margin: 5px;
background-color: yellow;
}
-->
</style>
<!--
#jquery-api-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-form p {
margin-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #f0f0f0;
}
#jquery-api-form input,
#jquery-api-form select,
#jquery-api-form textarea,
#jquery-api-form button {
margin: 5px;
background-color: yellow;
}
-->
</style>
HTML
<p>
<button id="jquery-api-toggle">toggle</button>
有効になっている要素の数：<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-form">
<p>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="button" value="インプットボタン" disabled="disabled" />
<input type="button" value="インプットボタン" disabled="disabled" />
</p>
<p>
<input type="checkbox" />
<input type="checkbox" />
</p>
<p>
<input type="checkbox" disabled="disabled" />
<input type="checkbox" disabled="disabled" />
</p>
<p>
<input type="file" />
<input type="file" />
</p>
<p>
<input type="file" disabled="disabled" />
<input type="file" disabled="disabled" />
</p>
<p>
<input type="hidden" />
<input type="hidden" />
</p>
<p>
<input type="hidden" disabled="disabled" />
<input type="hidden" disabled="disabled" />
</p>
<p>
<input type="image" />
<input type="image" />
</p>
<p>
<input type="image" disabled="disabled" />
<input type="image" disabled="disabled" />
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="password" disabled="disabled" />
<input type="password" disabled="disabled" />
</p>
<p>
<input type="radio" />
<input type="radio" />
</p>
<p>
<input type="radio" />
<input type="radio" disabled="disabled" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="reset" disabled="disabled" />
<input type="reset" disabled="disabled" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<input type="submit" disabled="disabled" />
<input type="submit" disabled="disabled" />
</p>
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<select disabled="disabled">
<option disabled="disabled">オプション</option>
<option disabled="disabled">オプション</option>
</select>
<select disabled="disabled">
<option disabled="disabled">オプション</option>
<option disabled="disabled">オプション</option>
</select>
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<textarea disabled="disabled"></textarea>
<textarea disabled="disabled"></textarea>
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
<p>
<button>ボタン disabled="disabled"</button>
<button disabled="disabled">ボタン</button>
</p>
</form>
<button id="jquery-api-toggle">toggle</button>
有効になっている要素の数：<span id="jquery-api-message"></span>
</p>
<form id="jquery-api-form">
<p>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="button" value="インプットボタン" disabled="disabled" />
<input type="button" value="インプットボタン" disabled="disabled" />
</p>
<p>
<input type="checkbox" />
<input type="checkbox" />
</p>
<p>
<input type="checkbox" disabled="disabled" />
<input type="checkbox" disabled="disabled" />
</p>
<p>
<input type="file" />
<input type="file" />
</p>
<p>
<input type="file" disabled="disabled" />
<input type="file" disabled="disabled" />
</p>
<p>
<input type="hidden" />
<input type="hidden" />
</p>
<p>
<input type="hidden" disabled="disabled" />
<input type="hidden" disabled="disabled" />
</p>
<p>
<input type="image" />
<input type="image" />
</p>
<p>
<input type="image" disabled="disabled" />
<input type="image" disabled="disabled" />
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="password" disabled="disabled" />
<input type="password" disabled="disabled" />
</p>
<p>
<input type="radio" />
<input type="radio" />
</p>
<p>
<input type="radio" />
<input type="radio" disabled="disabled" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="reset" disabled="disabled" />
<input type="reset" disabled="disabled" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<input type="submit" disabled="disabled" />
<input type="submit" disabled="disabled" />
</p>
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<select disabled="disabled">
<option disabled="disabled">オプション</option>
<option disabled="disabled">オプション</option>
</select>
<select disabled="disabled">
<option disabled="disabled">オプション</option>
<option disabled="disabled">オプション</option>
</select>
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<textarea disabled="disabled"></textarea>
<textarea disabled="disabled"></textarea>
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
<p>
<button>ボタン disabled="disabled"</button>
<button disabled="disabled">ボタン</button>
</p>
</form>