如何用Javascript重置单选按钮中的值
How to reset values in radio button with Javascript
如果我选择第一个(第二个或最后一个(选项,则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);
});
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- JavaScript:如何用变量填充单选按钮值和标签
- 如何用图像替换单选按钮
- 如何用纯javascript找到单选按钮的值
- 如何用数组元素作为按钮的标签动态创建单选按钮
- 如何用JS创建单选按钮
- 如何用JavaScript选择一个单选按钮
- 如何用Javascript重置单选按钮中的值
- 如何用jQuery检测某个单选按钮是否被选中
- 如何用一个单选按钮更新2个属性
- 如何用jQuery动态创建一个单选按钮