如何使用Javascript重置单选按钮中的值

如果选择第一个（第二个或最后一个）选项，则将禁用其余选项，并启用所选选项中的所有值。然而，我的代码的工作方向是错误的。请帮我解决这个问题

HTML:

<table>
<tr>
    <td>
        <input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="radio" name="abc" value="car" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
        <input type="checkbox" />Taxi</td>
</tr>
</table>

var rbt_vehicle = $("input[name=vehicle]");

$(rbt_vehicle).on('change', function (e) {
var optionSelected = $("option:checked", this);
var valueSelected = this.value;
//alert(valueSelected);
$("#" + valueSelected).find('input[type="text"]').val('').addClass("readOnly").attr('disabled', true);
$("#" + valueSelected).find(':checkbox,:radio').prop('checked', false).addClass("readOnly").attr('disabled', true);
});

<table>
<tr>
    <td>
        <input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="radio" name="abc" value="car" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
    <td>
        <input type="checkbox" />Taxi</td>
</tr>
</table>

var rbt_vehicle = $("input[name=vehicle]");

// Set disabled state all values as default
$('.set_width input[type="text"]').addClass("readonly").attr('disabled', true);
$('.set_width input[type="radio"]').addClass("readonly").attr('disabled', true);
$('.set_width input[type="checkbox"]').addClass("readonly").attr('disabled', true);

$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;

$('.set_width input[type="text"]').prop('disabled', valueSelected === 'taxi').addClass('readonly').val('');

$('#' + valueSelected).find(':text').prop('disabled', false).removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).val('').addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true).prop('checked', false);

});

你可以做：

var rbt_vehicle = $("input[name=vehicle]");

$(rbt_vehicle).on('change', function (e) {
    var valueSelected = this.value;
    $('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
    $('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});

请注意，您需要使用

.prop（）

而不是

.attr（）

来设置表单元素的状态

从jQuery1.6开始，.attr（）方法返回未定义的属性 这还没有确定。检索和更改DOM属性，如 表单元素的选中、选中或禁用状态使用 .prop（）方法

对不起，我不能通过你的电话。我必须编辑你的代码。但基本上，我是这样解决这个问题的

首先，我分析了IDs中的DOM关系。每次单击单选按钮，我都会得到它的值。我将它附加到ID选择器的Hashtag中，因为您以这种方式构建了下一行

接下来，我尝试删除所有带有“active”的类，并将所选行设置为“active”类

---

现在，下一个循环将在输入中启用所有“活动”行，禁用所有“非活动”类行

HTML:

检查这个正在运行的示例

---

这是我的答案，如果出现问题，请告诉我，或者您有其他方法将其缩短或更易于理解：-）

HTML:

<table>
<tr>
    <td>
        <input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="radio" name="abc" value="car" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
        <input type="checkbox" />Taxi</td>
</tr>
</table>

var rbt_vehicle = $("input[name=vehicle]");

$(rbt_vehicle).on('change', function (e) {
var optionSelected = $("option:checked", this);
var valueSelected = this.value;
//alert(valueSelected);
$("#" + valueSelected).find('input[type="text"]').val('').addClass("readOnly").attr('disabled', true);
$("#" + valueSelected).find(':checkbox,:radio').prop('checked', false).addClass("readOnly").attr('disabled', true);
});

<table>
<tr>
    <td>
        <input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="radio" name="abc" value="car" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
    <td>
        <input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
    <td>
        <input type="checkbox" />Taxi</td>
</tr>
</table>

var rbt_vehicle = $("input[name=vehicle]");

// Set disabled state all values as default
$('.set_width input[type="text"]').addClass("readonly").attr('disabled', true);
$('.set_width input[type="radio"]').addClass("readonly").attr('disabled', true);
$('.set_width input[type="checkbox"]').addClass("readonly").attr('disabled', true);

$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;

$('.set_width input[type="text"]').prop('disabled', valueSelected === 'taxi').addClass('readonly').val('');

$('#' + valueSelected).find(':text').prop('disabled', false).removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).val('').addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true).prop('checked', false);

});

---

等待其他无线电设备出现了故障。我必须改一下代码。使用

.attr（）

设置布尔属性通常不是一个好主意。您应该尝试改用

.prop（）

。您可以直接选择：

$（“输入[name=vehicle]”）

您不应该使用

removeProp

删除禁用的属性。根据jQuery:

注意：不要使用此方法删除本机属性，例如选中、禁用或选中的

。还有

.prop（“禁用”、“真”）不正确，因为它导致OP相信
.prop（“禁用”、“错误”）可以工作-但它不会。它应该是一个布尔值：
.prop（“disabled”，true）抱歉，因此与
.prop（“disabled”，true）相反将是
.prop（“禁用”，false）谢谢你的代码，但它不适用于滑行选项（当我选择滑行选项时，两个
文本框必须被禁用）。你检查我的演示了吗？它的工作原理与您描述的一样。作为您的演示-请选择滑行选项，文本框未被禁用。。。我说的对吗？什么文本框？我想当你点击
taxi
radio时应该启用
taxi
textbox？@Felix:-请看一下，结果在左边。这说明了我的意思。非常感谢你的代码。但是，正如我所检查的，我不允许编辑HTML。