input布尔属性的赋值问题

基于angularjs开发
//通过接口返回的isReadonly属性来设置是否可读，但实际效果不论data.isReadonly是true还是false都是只读

<input type="text" name="username" readonly="data.isReadonly" />

<div>
  <input type="number"  />
  <!-- 这三种方式都是只读 -->
  <input type="number" readonly />
  <input type="number" readonly="" />
  <input type="number" readonly="true" />
  <input type="number" readonly="false" />
</div>
<div>
  <input type="radio" name="gender" value="man" checked=""/>man
  <input type="radio" name="gender" value="women" />women
</div>
<div>
  <input type="checkbox" name="sport" value="badminton"  />badminton
  <input type="checkbox" name="sport" value="football" checked disabled />football
  <input type="checkbox" name="sport" value="basketball" checked="" disabled="" />basketball
  <input type="checkbox" name="sport" value="swiming" checked="true" disabled="true" />swiming
  <input type="checkbox" name="sport" value="tennis" checked="false" disabled="false" />tennis
</div>

<input type="text" name="username" ng-readonly="data.isReadonly" />

设置布尔属性：$('input').attr('readonly', true)
取消布尔属性：$('input').attr('readonly', false)

attr: function( elem, name, value ) {
	var ret, hooks,
		nType = elem.nodeType;

	// Fallback to prop when attributes are not supported
	if ( typeof elem.getAttribute === "undefined" ) {
		return jQuery.prop( elem, name, value );
	}

	// 兼容布尔属性
	if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
		hooks = jQuery.attrHooks[ name.toLowerCase() ] ||
			( jQuery.expr.match.bool.test( name ) ? boolHook : undefined );
	}

	if ( value !== undefined ) {
		if ( value === null ) {
			jQuery.removeAttr( elem, name );
			return;
		}

		// 如果是布尔属性，则走hooks内的方法
		if ( hooks && "set" in hooks &&
			( ret = hooks.set( elem, value, name ) ) !== undefined ) {
			return ret;
		}

		elem.setAttribute( name, value + "" );
		return value;
	}

	if ( hooks && "get" in hooks && ( ret = hooks.get( elem, name ) ) !== null ) {
		return ret;
	}

	ret = jQuery.find.attr( elem, name );

	// Non-existent attributes return null, we normalize to undefined
	return ret == null ? undefined : ret;
}

// Hooks for boolean attributes，可以通过attr('readonly', false)来关闭布尔属性
var boolHook = {
	set: function( elem, value, name ) {
		if ( value === false ) {
			// 即$('input').attr('readonly', false)去掉只读
			jQuery.removeAttr( elem, name );
		} else {
			elem.setAttribute( name, name );
		}
		return name;
	}
}

function setAttr (el: Element, key: string, value: any) {
  debugger
  if (el.tagName.indexOf('-') > -1) {
    baseSetAttr(el, key, value)
  } else if (isBooleanAttr(key)) {
    // 判断isBooleanAttr方法是否是布尔属性
    // set attribute for blank value
    // e.g. <option disabled>Select one</option>
    // 通过isFalsyAttrValue方法判断值是否是false与null，如果isFalsyAttrValue返回为true则表示传入的值
   //是false or null，则删除当前布尔属性，否则设置当前的属性值为el.setAttribute(key, value)
    if (isFalsyAttrValue(value)) {
      el.removeAttribute(key)
    } else {
      // technically allowfullscreen is a boolean attribute for <iframe>,
      // but Flash expects a value of "true" when used on <embed> tag
      value = key === 'allowfullscreen' && el.tagName === 'EMBED'
        ? 'true'
        : key
      el.setAttribute(key, value)
    }
  } else if (isEnumeratedAttr(key)) {
    el.setAttribute(key, isFalsyAttrValue(value) || value === 'false' ? 'false' : 'true')
  } else if (isXlink(key)) {
    if (isFalsyAttrValue(value)) {
      el.removeAttributeNS(xlinkNS, getXlinkProp(key))
    } else {
      el.setAttributeNS(xlinkNS, key, value)
    }
  } else {
    baseSetAttr(el, key, value)
  }
}

export const isBooleanAttr = makeMap(
  'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
  'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
  'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
  'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
  'required,reversed,scoped,seamless,selected,sortable,translate,' +
  'truespeed,typemustmatch,visible'
)

export const isFalsyAttrValue = (val: any): boolean => {
  return val == null || val === false
}

即<input readonly>, 
<input readonly=''>, 
<input readonly="readonly">，
<input readonly=false>，
<input readonly=true>都是一样的效果