Question

假设我有一些内容，我想根据无线电按钮填写，例如，如果我点击一个radiobutton，3 textarea s（或input s）成为活跃，我可以填写他们和“属于”其他radiobutton的textarea变得不活跃，我无法填写，反之亦然。

<form>
    <input type="radio" name="group1" value="1"> val1<br> 

    <input type="radio" name="group1" value="2" checked> val2<br>

    <input type="text" value="123123" id="id1">
    <input type="text" value="123123" id="id2">
    <input type="text" value="123123" id="id3">
    <input type="text" value="123123" id="id4">
</form>

问题是，如何使用有效的val1单选按钮启用输入id1，id2，id3和val2启用id4并禁用id1，id2，id3

Answer 1

试试这个 - http://jsfiddle.net/h7ZYY/

$("input:text").prop("disabled", true);
$("input:radio").on("click", function() {
    $("input:text").prop("disabled", true);
    $("input.group" + $(this).val()).prop("disabled", false);
});

Answer 2

试试这个：

$('input[name=group1]').change(function(){
    if (this.value == 1) {
       $('#id1, #id2, #id3').prop('disabled', false)
       $('#id4').prop('disabled', true)
    } else {
       $('#id1, #id2, #id3').prop('disabled', true)
       $('#id4').prop('disabled', false)
    }
})

DEMO

Answer 3

您可以按<input type="text" value="123123" id="id1" disabled="disabled">

停用所有输入

然后，使用Javascript，您可以执行此操作：

<script>
function disable(input)
{
if (input == "2")
{
document.getElementById('id1').disabled = true;
document.getElementById('id2').disabled = true;
document.getElementById('id3').disabled = true;
document.getElementById('id4').disabled = false;
}
else
{
document.getElementById('id1').disabled = false;
document.getElementById('id2').disabled = false;
document.getElementById('id3').disabled = false;
document.getElementById('id4').disabled = true;
}
}
</script>

<form>
    <input type="radio" name="group1" value="1" onclick='disable('1');'> val1<br> 

    <input type="radio" name="group1" value="2" onclick='disable('2')'> val2<br>

    <input type="text" value="123123" id="id1" disabled="disabled">
    <input type="text" value="123123" id="id2" disabled="disabled">
    <input type="text" value="123123" id="id3" disabled="disabled">
    <input type="text" value="123123" id="id4" disabled="disabled">
</form>

Answer 4

要禁用文字框，您可以编写

   document.getElementById(textBoxID).disabled = True/False

显然你需要onclick事件，

<input type="radio" name="group1" value="1" onclick ="EnableDisable(this);">
function EnableDisable(e) {
      $('text1').attr("disabled", !e.checked);
  }

Answer 5

我会将textareas /输入归属于div下的特定单选按钮，所以我可以轻松地选择它并给div提供一个id，它可以与单选按钮相关（这里我的Div id在格式为"area-"+ radioButtonValue

<input type="radio" name="group1" value="1"> val1<br>
<input type="radio" name="group1" value="2"> val2<br>

<div  id="area-1" class="area">
    <input type="text" value="123123" id="id1">
    <input type="text" value="123123" id="id2">
    <input type="text" value="123123" id="id3">
</div>
<div id="area-2"  class="area">    
    <p>Selcond</p>
    <input type="text" value="123123" id="id4">
</div>

脚本是

$(function(){
   $("div.area").hide();
    $("input[type=radio]").click(function(){        
      var val=$(this).val();
      $(".area").hide();    
      $("#area-"+val).show();        
    });      
});

只要您按照命名约定将单选按钮与其区域相关联，这将适用于n个单选按钮及其区域（包含textarea / input /其他元素）。

工作样本：http://jsfiddle.net/zSeYW/

Answer 6

您可以通过该活动制作所需的一切：

onChange="myJQueryFunction()"

输入广播

上的

在您必须：

之后

$('id').attr('disabled','disabled');

或：

$('id').removeAttr('disabled');

在您的jquery代码

上

通过radiobuttons启用\禁用元素

6 个答案: