【JS】【jQuery】【HTML】【CSS】活性 / 非活性の切り替え

■ 方法

【1】HTML/JavaScriptを使用する

 => disabled 属性 をJavaScriptで動的に、切り替える

// 非活性
document.getElementById("btnRed").disabled = "true";
// 活性
document.getElementById("btnRed").disabled = "";

【2】jQueryを使用する

[1] attr / removeAttr を使用する
[2] prop を使用する

// 非活性
$('#btnRed').attr("disabled", "disabled");
// 活性
$('#btnBlack').removeAttr("disabled");

// 非活性
$("#btnRed").prop("disabled", true);
// 活性
$("#btnBlack").prop("disabled", false);

■ サンプル

【1】HTML/JavaScriptを使用する

【例】「入力欄/非活性」を選べば、「入力欄」が入力できなくなる
<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample(disabledValue)
{
 document.getElementById("inputId").disabled = disabledValue;
}
</script>
</head>
<body>
  「入力欄/非活性」を選べば、「入力欄」が入力できなくなる
  <form name="form1" id="id_form1" action="">
    <input type="radio" name="radio1" onChange="sample(false)" checked> 入力欄/活性
    <input type="radio" name="radio1" onChange="sample(true)"> 入力欄/非活性
    <p><label>入力欄:<input name="textBox1" id="inputId" type="text" value="" /></label></p>
  </form>
</body>
</html>