Javascript 是否根据所选单选按钮禁用/隐藏文本框？

是否可以根据已选择的单选按钮禁用和更改文本框的样式

例如，我需要REF和Title文本框仅在选择项目时启用，如果选择Account则启用Name

HTML:

---

即使stackoverflow不用于创建完整的代码行，但如果您熟悉jquery，也可以使用它

您可以使用addClass函数添加CSS类

---

使用jQuery可以相当容易地做到这一点。下面是一个如何更改元素CSS的示例：

$(yourSelectorHere).css({ "font-weight": "bold",
        "color": "black"
});

下面是如何禁用/重新启用元素： 禁用：

启用：

$(yourSelectorHere).removeAttr("disabled");

希望这能帮助你开始。以下是jQuery API的链接供参考：

---

您可以使用disabled来禁用javascript中的控件，将事件侦听器添加到单选按钮，然后就可以设置了，下面是一个示例：

var rbProject = document.getElementById('radio1-1');

rbProject.addEventListener('change', function (e) {
    txtRef.disabled = false;
    txtTitle.disabled = false;
    txtName.disabled = true;
})

---

让你看看是怎么做的

您需要做的基本事情是检查选中了哪个单选按钮。现在，jQuery附带了一个.change方法，在您的情况下，可以像这样使用它：

$(":radio").change(function() {

现在，您没有任何与收音机相关联的有用值属性，您应该！然后您可以只检查这个。value，例如：与之关联的项目的无线电应该有value='Project'作为属性

因此，现在您要检查选择了哪个收音机：

var value = this.value; 
//if you dont have a value yet, I see you have labels with text
var value = $(this).next("label").text(); //although this way is ugly IMO

现在，检查选择了哪一个

if (value == "Project") {
    //A project radio is selected
    $(":text").prop("disabled", true); //this line is key, it disables all textboxes on change, now you enable the ones that you need
    //Enable boxes that match criteria
}

---

这就是它的基本原理。

我知道情况并不完全相同：

---

所以您试图实现什么？>Stackoverflow用于解决问题。不是为了准备现成的代码。@putvande嗯，我发现一些代码看起来不是很有效。为什么效率不高？@Antidexer如果你读了这个问题，你会发现我在问是否可能。我在寻找我需要的方法。因此，我添加了标记、CSS、Javascript和JQuery，这意味着我不知道我需要什么。我不需要现成的代码。这非常感谢。有些人认为我希望有人为我编写代码，但这正是我想要的。谢谢没问题！如果您不介意将此标记为您所寻求的答案，我们将不胜感激

var value = this.value; 
//if you dont have a value yet, I see you have labels with text
var value = $(this).next("label").text(); //although this way is ugly IMO

if (value == "Project") {
    //A project radio is selected
    $(":text").prop("disabled", true); //this line is key, it disables all textboxes on change, now you enable the ones that you need
    //Enable boxes that match criteria
}

<fieldset>
<input type=radio name=category><label>Project</label>
<label>Ref:</label><input type=text>
<label>Title:<label><input type=text>
</fieldset>

<fieldset>
<input type=radio name=category><label>Account</label><label>Name:</label><input type=text>
</fieldset>

<fieldset>
<input type=radio name=category><label>General Business</label><input type=text>
</fieldset>

<style>

fieldset{
border:none;
}

fieldset>label:first-of-type{
width:150px;
display:inline-block;
vertical-align:top;
}

fieldset>label:not(:first-of-type){
display:inline-block;
}

input[type=radio]:not(:checked)+label ~*{
opacity:0;
}

input[type=radio]:checked+label ~*{
opacity:1;
}
</style>