Question

我写了下面的代码，但没有回应我切换我的收音机盒。我想禁用未经检查的单选复选框。

<input class="radio-checkbox" type="radio" name="choice" value="custom_msg" checked>Custom Message :<br/>
<input style="width:200px" placeholder="your msg" type="text" id="custom_text"/>

<br/>

<input class="radio-checkbox" type="radio" name="choice" value="custom_img">Image :<br/>
<input style="width:200px" placeholder="an image url" type="text" id="custom_img"/>

我的js

$(".radio-checkbox").change(function() {
    if(this.checked) {
        $(this).next().$("input").prop('disabled', true);
    }
});

Answer 1

您没有使用正确的.next()。我想你可以使用.nextAll()来总结这个：

＆＃13;

$(".radio-checkbox").click(function() {
  $("input:text").prop("disabled", true);
  $(this).nextAll("input").eq(0).prop('disabled', !this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio-checkbox" type="radio" name="choice" value="custom_msg" checked>Custom Message :
<br/>
<input style="width:200px" placeholder="your msg" type="text" id="custom_text" />
<br/>
<input class="radio-checkbox" type="radio" name="choice" value="custom_img">Image :
<br/>
<input style="width:200px" placeholder="an image url" type="text" id="custom_img" disabled />

＆＃13;

Answer 2

试试这个：你的问题和jsfiddle困惑了我，你想在选择单选按钮时禁用输入框还是要反转它？

以下是禁用已选中单选按钮的输入框的代码

$(document).ready(function(){

   $(".radio-checkbox").click(function() {
     $(this).siblings("input[type=text]").removeProp("disabled");          
     $(this).next().next("input[type=text]").prop('disabled', true);
  });

});

<强> DEMO

此代码将执行相反的操作，这将启用已选中单选按钮的输入

$(document).ready(function(){

       $(".radio-checkbox").click(function() {
         $(this).siblings("input[type=text]").prop("disabled",true);          
         $(this).next().next("input[type=text]").removeProp('disabled');
      });

    });

<强> DEMO

Answer 3

在js：

中试试这个

$(document).ready(function(){

    $(".radio-checkbox").change(function() {
       if (this.value == 'custom_msg') {
            $("#custom_img").prop('disabled', true);
            $("#custom_text").prop('disabled', false);
       }
       else if (this.value == 'custom_img') {
            $("#custom_text").prop('disabled', true);
            $("#custom_img").prop('disabled', false);
       }
    });

});

Updated Fiddle

禁用/启用基于单选复选框的输入字段

3 个答案: