首页 > 解决方案 > 根据输入值删除禁用属性

问题描述

function add_option(){
	var tot_option=parseInt($('#tot_option').val());
	tot_option++;
	$('#tot_option').val(tot_option);
	var par="'radio"+tot_option+"'";
	var opt="<input type='text' id='opt"+tot_option+"' onblur='chk(this.value,'"+par+"')' name='answers[]' style='width:80%;' onfocus='add_option()'> <input type='radio' id='radio"+tot_option+"' required disabled name='canswer' value='"+tot_option+"'><br><br>";
	document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
    		element.removeAttribute("onfocus");
  	});
	$('#new_option').append(opt);
}
function chk(ivalue,rad){
	if(ivalue!=''){
		$('#'+rad).removeAttr('disabled');
	}else{
		$('#'+rad).attr('disabled','disabled');
		$('#'+rad).removeAttr('checked','checked');
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" style='width:80%;' onblur="chk(this.value,'radio1')" id="opt1" name="answers[]">
<input type="radio" id="radio1" disabled required name="canswer" value="1"><br><br>
<input type="text" id="opt2" onblur="chk(this.value,'radio2')" style='width:80%;' name="answers[]" onfocus="add_option()">
<input type="radio" id="radio2" required disabled name="canswer" value="2"><br><br>
<span id="new_option"></span>

我有多种输入类型和一个单选按钮,每个输入前面都有一个单选按钮,如果我的输入类型有一些值,我想从收音机中删除禁用,如果它没有值,然后将禁用属性添加到收音机。它在前两个输入中工作正常,但之后它不工作

标签: javascriptjqueryhtml

解决方案


你的代码有一些缺陷,

1 您将 this.value 作为字符串发送到此处onblur='chk(this.value,'"+par+"')

2在此onblur function call发送par作为参数时存在问题,

所以在这里我修改了你的代码,现在它正在工作

function add_option(){
    var tot_option=parseInt($('.totalOption').length);
    tot_option++;
    $('#tot_option').val(tot_option);
    var par="'radio"+tot_option+"'";
    var onBlur = 'onblur=chk('+ par.toString() +')';
    var opt="<input type='text' id='opt"+tot_option+"' class='totalOption' " + onBlur + " name='answers[]' style='width:80%;' onfocus='add_option()'> <input type='radio' id='radio"+tot_option+"' required disabled name='canswer' value='"+tot_option+"'><br><br>";
    document.querySelectorAll("input[onfocus]").forEach(function(element, index) {
            element.removeAttribute("onfocus");
    });
    $('#new_option').append(opt);
}
function chk(rad){
    if(event.relatedTarget == null)
        return;
    var SelctedTarget = Number(event.relatedTarget.id[event.relatedTarget.id.length - 1]) - 1;
    var ivalue = $('#opt' + SelctedTarget).val();
    if(ivalue!=''){
        $('#'+rad).removeAttr('disabled');
    }else{
        $('#'+rad).attr('disabled','disabled');
        $('#'+rad).removeAttr('checked','checked');
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" style='width:80%;' onblur="chk('radio1')" id="opt1" class="totalOption" name="answers[]">
<input type="radio" id="radio1" disabled required name="canswer" value="1"><br><br>
<input type="text" id="opt2" class="totalOption" onblur="chk('radio2')" style='width:80%;' name="answers[]" onfocus="add_option()">
<input type="radio" id="radio2" required disabled name="canswer" value="2"><br><br>
<span id="new_option"></span>


推荐阅读