【问题标题】:jQuery disabled button with checkbox issue带有复选框问题的jQuery禁用按钮
【发布时间】:2010-10-05 02:28:37
【问题描述】:

我有以下代码在选中复选框时启用按钮。

http://jsfiddle.net/ERfWz/1/

以下是我在 HTML 页面中的代码的 sn-p。它几乎相同,但由于某种原因它不起作用。我想我可能已经看它太久了。

<script type='text/javascript'>
$(function() {
  $('#agree').click(function() {
    var satisfied = $('#agree:checked').val();
    if (satisfied != undefined) $('#submit').removeAttr('disabled');
    else $('#submit').attr('disabled', 'disabled');
  });
});​
</script>



<form>
    <table>
    <td colspan="5"><input type="checkbox" id="agree" name="agree" />I have read and agree to the terms and 

    conditions</td>
                  </tr>
                  <tr>
                    <td colspan="5" align="center"><input name="Submit" type="submit" id="submit" disabled value="I Accept. 

    Submit"/>
                  <label>
                      <input name="reset" type="reset" id="reset" value="Reset" />
                      <input type="hidden" name="ip" value=" echo $REMOTE_ADDR; " />
                  </label></td>
                  </tr>
                    <tr>
                    <td>*Required Fields</td>
                    <td colspan="4"></td>
                  </tr>
                   <tr>
                    <td colspan="5"><h3></h3>
                     <p>&nbsp;</p></td>
                  </tr>
                </table>
            </fieldset>
            </form>

【问题讨论】:

  • if () 后面的 {} 是可选的吗? if () {} 我一直都是这样做的。
  • @orolo:是的,它们是可选的。无论如何都使用它们是一种好习惯,但如果它们不存在,则标准是假设下一行(并且只有下一行)是块中唯一的东西。

标签: jquery button checkbox


【解决方案1】:

您还可以将disabled 设置为true 和false,因此您可以将其简化为:

$(function() {
  $('#agree').change(function() {
    $('#submit').attr('disabled', !this.checked);
  });
});​

Test it out here,请注意,还有一些无效标记正在进行,导致一些跨浏览器不一致,它应该看起来像这样:

<form>
  <table>
    <tr><td align="center"><input type="checkbox" name="agree" id="agree">I agree Terms and Conditions</td></tr>
    <tr><td align="center"><input type="submit" name="submit" id="submit" value="submit" disabled></td></tr>
  </table>
</form>

还有.change() 方法在这里更好一点,以确保您拥有正确的状态。

【讨论】:

  • +1 不知道!这是否也适用于其他x="x" 属性,如readonly 等?
  • @BoltClock's - 是的,selected 也是,每个都是 DOM 中的布尔值 :)
  • @Nick,太好了。谢谢你。一旦时间限制结束,我会检查这个作为正确答案。
  • @Nick:您会遇到任何 IE 更改问题吗?我知道我过去在 IE 和更改事件方面遇到过问题,所以我只是想知道它是否适用于此。
  • @Jeff - 不,这是冒泡,在
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-08-23
  • 1970-01-01
  • 2011-10-30
  • 1970-01-01
  • 2021-08-21
  • 2012-06-05
  • 1970-01-01
相关资源
最近更新 更多