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

How to reset values in radio button with Javascript

本文关键字:单选按钮 何用 Javascript      更新时间:2023-09-26

如果我选择第一个(第二个或最后一个(选项,则rest选项将被禁用,所选选项中的所有值都将被启用。然而,我的代码工作的方向是错误的。请帮我解决这个问题。

演示

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>

Javascript:

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);
});

你可以做:

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()来设置表单元素的状态。

从jQuery 1.6开始,.attr((方法为属性返回undefined尚未设置。检索和更改DOM属性,例如表单元素的选中、选中或禁用状态,请使用.pr((方法。

更新的Fiddle

$("input[name=vehicle]").click(function(ev){
rowID = $(this).val();
rowSelector = "#"+rowID;

$(".active").removeClass("active");
$(rowSelector).addClass("active");
$.each($(".set_width"),function(){
    if(!$(this).hasClass("active")){
      $(this).find("input").prop("disabled",true);  
    }
    else{
        $(this).find("input").removeProp("disabled");
    }
});

});

很抱歉我不能拨通你的JSFiddle。我不得不编辑你的代码。但基本上,以下是我解决问题的方法。

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

接下来,我将尝试删除所有带有"active"的类,并将所选行设置为"active"类。

现在,下一个循环将在输入中启用所有"活动"行,禁用所有"非活动"类行。

这应该可以满足您的需求,

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" class="child" />
    </td>
    <td>
        <input type="checkbox" class="child" />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" class="child"/>
    </td>
    <td>
        <input type="radio" name="abc" value="car" class="child" />Car</td>
    <td>
        <input type="radio" name="abc" value="bus" class="child" />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" class="child" />Taxi</td>
</tr>
</table>

JS:

var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var optionSelected = $("option:checked", this);
var valueSelected = this.value;
    $('input.child').addClass("readOnly").attr('disabled', true);
    // if you want to clear disabled values...
    $('input[type="text"].child').val('');
    $('input[type="radio"].child').prop('checked', false);
    $('input[type="checkbox"].child').prop('checked', false);
    $("#" + valueSelected).find('input.child').removeClass('readOnly').attr('disabled', false);
});
$('input.child').addClass("readOnly").attr('disabled', true);

签出这个运行示例

http://jsfiddle.net/CEuZd/

这是我的答案,如果出现问题,请告诉我,或者你有其他方法可以缩短或更容易理解:-(

演示

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>

Javascript:

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);
});