0

假设，我有一些内容，我想根据单选按钮填写，例如，如果我单击一个radiobutton，3 textareas（或inputs）变为活动状态，我可以填写它们和 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

4

6 回答 6

2

试试这个 - 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);
});
于 2012-07-24T13:54:46.303 回答
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)
    }
})

演示

于 2012-07-24T13:56:25.647 回答
1

您可以通过以下方式禁用所有输入<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>
于 2012-07-24T13:52:03.660 回答
1

要禁用文本框，您可以写下来，

   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);
  }
于 2012-07-24T13:54:39.597 回答
1

我会将 textareas/inputs 分组属于 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 个单选按钮及其区域（包含文本区域/输入/其他元素）。

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

于 2012-07-24T13:54:54.967 回答
0

您可以在活动中完成您想要的一切：

onChange="myJQueryFunction()"

在您的输入收音机上

之后你只需要：

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

或者：

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

在你的 jquery 代码上

于 2012-07-24T13:47:00.283 回答