jqueryを使用してテキストボックスを無効にしますか？

同じ名前で値が異なる3つのラジオボタンがあります.3番目のラジオボタンをクリックすると、チェックボックスとテキストボックスが無効になります。前進....

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

HTML

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

Javascript

  $("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==2) { //3rd radiobutton
            $("#textbox1").attr("disabled", "disabled"); 
            $("#checkbox1").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox1").removeAttr("disabled"); 
            $("#checkbox1").removeAttr("disabled"); 
        }
      });

  });

本当に必要なわけではありませんが、関数呼び出しを高速化するokwのコードの小さな改善（関数呼び出しの外に条件を移動しているため）。

$("#radiobutt input[type=radio]").each(function(i) {
    if (i == 2) { //3rd radiobutton
        $(this).click(function () {
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        });
    } else {
        $(this).click(function () {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        });
    }
});

このスレッドは少し古いですが、情報を更新する必要があります。

http://api.jquery.com/attr/

フォーム要素のチェック状態、選択状態、無効状態などのDOMプロパティを取得して変更するには、.prop（）メソッドを使用します。

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true); 
        $("#checkbox1").prop("disabled", true); 
    }
    else {
        $("#textbox1").prop("disabled", false); 
        $("#checkbox1").prop("disabled", false);
    }
  });
});

これらのソリューションの一部が.each（）を使用する理由がわかりません-必要ありません。

3番目のチェックボックスがクリックされた場合に無効になる作業コードをいくつか示します。それ以外の場合は、disabled属性が削除されます。

注：チェックボックスにIDを追加しました。また、IDはドキュメント内で一意である必要があるため、ラジオボタンのIDを削除するか、IDを一意にする必要があります。

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

古い質問に答えるのは良い習慣ではないことは知っていますが、この質問は後で質問を目にする人のために書いています。

JQueryで状態を変更する最善の方法は、

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

完全なイラストについては、このリンクを確認してください。 jQueryで入力を無効/有効にしますか？

少し違う方法でやった

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />   

クラス属性に注意

 $(document).ready(function() {      
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);           
    });
});

この方法では、JavaScriptの変更を心配する必要のないラジオボタンをさらに追加する必要があります。

「クリック」イベントをいくつかのラジオボタンにバインドし、クリックされたラジオボタンの値を読み取り、その値に応じて、チェックボックスやテキストボックスを無効/有効にすることを考えていると思います。

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});

パーティーに遅刻して申し訳ありませんが、ここには改善の余地があります。「textboxを無効にする」ではなく、radionboxの選択とコードの簡略化により、後で変更できるように、これをもう少し将来的に証明します。

まず、特定のラジオボタンを指すために.each（）とインデックスを使用しないでください。ラジオボタンの動的セットを操作する場合、または後でラジオボタンを追加または削除する場合、コードは間違ったボタンに反応します。

次に、OPが作成されたときはそうではなかったので、クリックではなく.on（ 'click'、function（）{...}）を使用することをお勧めします... http：//api.jquery。 com / on /

最も重要なことですが、名前に基づいてラジオボタンを選択することにより、コードをよりシンプルで将来の証明にすることもできます（ただし、投稿に既に表示されています）。

だから私は次のコードで終わった。

HTML（okwのコードに基づく）

<span id="radiobutt">
    <input type="radio" name="rad1" value="1" />
    <input type="radio" name="rad1" value="2" />
    <input type="radio" name="rad1" value="3" />
</span>
<div>
    <input type="text" id="textbox1" />
    <input type="checkbox" id="checkbox1" />
</div>

JSコード

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

MVC 4 @ Html.CheckBox通常、人々はmvcチェックボックスのチェックとチェック解除に対してアクションを実行します。

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

変更したいコントロールのIDを定義し、JavaScriptで以下を実行できます

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

次のようにプロパティを変更することもできます

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

ラジオボタンの値を取得し、3の場合はそれぞれと一致してから無効にしますcheckbox and textbox。

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>