Question

我想要两个输入，如果其中一个等于另一个，则该按钮将被启用，否则将被禁用。

我设法在Ajax中做到了，但是我需要在Javascript中做到

$(':password').keyup(function() {
    if($('#pass').val() == $('#pass1').val() && $('#pass').val()!=='') {
       $('#go').removeAttr('disabled');
    } else {
       $('#go').attr('disabled', true);   
    }
});

Answer 1

您正在寻找form validation功能。
有很多用于此类任务的插件和库。

但是有一个简单的例子

function getElements(){
	return {
		password: document.querySelector('input[name="password"]'),
		confirm: document.querySelector('input[name="passwordConfirm"]'),
		button: document.querySelector('button'),
	}
}

function validate(){
	let els = getElements();
	els.button.disabled = els.password.value !== els.confirm.value;
}

let elements = getElements();
elements.password.addEventListener('input', validate);
elements.confirm.addEventListener('input', validate);
validate();

<input name="password" type="password" placeholder="password...">
<input name="passwordConfirm" type="password" placeholder="password confirm...">
<button type="submit">submit</button>

和jQuery变体

function validate(event){
	let $frm = $(event.target).closest('form');
	let pas = $frm.find('input[name="password"]');
	let conf = $frm.find('input[name="passwordConfirm"]');
	let btn = $frm.find('button');
	btn.prop('disabled', pas.val() !== conf.val());
}

let $frm = $('form');
$frm.on('input', validate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<input name="password" type="password" placeholder="password...">
<input name="passwordConfirm" type="password" placeholder="password confirm...">
<button type="submit">submit</button>
</form>

Answer 2

这应该有效。这是您的脚本“翻译”为原始JavaScript。

<head>
<style>
    #map {
        height: 500px;
        width: 800px;
    }
</style>
</head>
@{List<string> urls = new List<string>();
    foreach (var item in Model)
    {
        string itemLocation = item.Location;
        var url = ("https://maps.googleapis.com/maps/api/geocode/json?address=" + itemLocation + "&key=xxxAPIKEYxxx");
        for (int i = 0; i < urls.Count; i++)
        {
            if (url == urls[i])
            {
                goto OUTERCONTINUE;
            }
        }
        if (item.IsPublic | User.IsInRole("Admin"))
        { urls.Add(url); }
        OUTERCONTINUE: continue;
    }
}
<body>
    <center><h2>Events</h2></center>
        <center>
            <div id="map"></div>
        </center>
        <script>
            function initMap() {
            var Milwaukee = { lat: 43.0389, lng: -87.9065 };
        var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: Milwaukee });
                @foreach (var item in urls) {
                    //get lat
                    //get long
                        <text>
                        var marker = new google.maps.Marker({
            //insert markers lat/long here
                        });</text>
                    }
}
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=xxxAPIKEYxxx&callback=initMap" >
        </script>
</body>

Answer 3

我为您创建了一个JSFiddle，并在普通JS中实现了该功能：https://jsfiddle.net/3m9g4p0h/4/

JS：

var pw1 = document.getElementById('pw1');
var pw2 = document.getElementById('pw2');
var button = document.getElementById('button');
function compare() {
    button.disabled = pw1.value !== pw2.value || pw1 === '';
}
pw1.addEventListener('keyup', compare);
pw2.addEventListener('keyup', compare);

HTML：

<input type="password" id="pw1" />
<input type="password" id="pw2" />
<button id="button" disabled="true">
  Click me
</button>

启用/禁用按钮取决于两个输入

3 个答案: